2

動画のアップロードには Extjs 4.2 と php を使用しています。しかし、ユーザーがアップロードできる時間に合わせてビデオの再生時間を制限したいと考えています。私のコードは .avi と .mov のみを許可します。

4

2 に答える 2

4

さて、コメントで述べたように、私はこれに興味をそそられたので、いろいろ調べてみることにしました。短い答えですが、多くはありません。しかし、非常に限られた方法でそれが見える...ちょっと可能です。

これは、それ自体が実際には答えではなく、概念実証のようなものであると言って、これを序文にしたいと思います。のようないくつかの HTML5 機能を使用します<video>-タグFileReaderの継続時間を読み取ることが可能かもしれないと考えた<video>ので、これについてかなりのグーグルを行いました。

古いブラウザでは明らかに失敗するので... Chromeでのみこれを確認しました。FileReaderFirefox で実装が異なるかどうかはわかりません。他のビデオ形式などについて話すこともできません。

とにかく、私は確かに検証のためにそれに頼るつもりはありませんが、最新のブラウザーの「便利な」検証機能の出発点になる可能性はありますか?

ここでの唯一の堅牢な全面的な検証ソリューションは、次のことであると私は主張します。

  • サーバーへの合理的な大まかなサイズ制限まで、任意のビデオのアップロードを許可します。
  • ファイル自体に対して 2 回目のパス検証を実行するキュー/非同期プロセスをサーバー上に作成します。私が言ったようffmpegに、ここで良い選択かもしれませんか？
    • 成功/失敗の電子メールをユーザーに送信しますか?

ちなみに、これは、ffmpeg を使用してビデオの長さを取得する方法を示す SO の回答です。

要素を含むページtest.htmlを作成します。input[type=file]

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Duration</title>
    </head>
    <body>
        <input id="upload" type="file">
        <div id="duration">Please choose a video</div>
        <script src="path/to/duration.js"></script>
    </body>
</html>

スクリプトの内容path/to/duration.js... 申し訳ありませんが、JavaScript は完全ではありません。

(function() {

  var upload   = document.getElementById('upload'),   // form input 
      duration = document.getElementById('duration'); // output for user

  // add a change event listener to the form input
  upload.addEventListener('change', function(e) {

    var file,
        reader;

    // check that a file has been selected
    if (this.files.length !== 1) {
      return;
    }

    duration.innerText = 'reading video...';
    file = this.files[0];

    // check the file's mime type, we want mp4 in this example
    if (file.type !== 'video/mp4') {
      duration.innerText = 'expected video/mp4, got ' + file.type;
      return false;
    }

    // create a FileReader object
    // and read the file as a data/url 
    // string so we can inline it later
    reader = new FileReader();
    reader.readAsDataURL(file);

    // callback when the reader is complete
    reader.onload = function() {

      var video,
          timeout;

      duration.innerText = 'processing video...';

      // create a html <video> element
      // assign data/url as src
      video = document.createElement('video');
      video.src = this.result;

      // poll the video readyState until it's ready
      // this came from another SO answer (which I accidentally closed... sorry/thanks :s )
      // we should now have our video duration, so echo to the browser!
      timeout = setInterval(function(){
        if (video.readyState > 0) {
          duration.innerText = 'video is ' + video.duration + ' seconds';
          clearInterval(timeout);
        }
      }, 500);

    };

  }, false);

})();

ラフで準備万端！

ところで、HTML5 Rocks のドキュメントは非常に役に立ちました。

お役に立てれば ：）

于 2013-11-07T22:48:53.263 に答える
0

クライアント側（Extjs）でビデオの長さを見つけたり、ビデオの長さを検証したりできるかどうかはわかりません。

于 2013-11-07T04:10:33.400 に答える