2

I am using Extjs 4.2 and php for uploading videos. But I want to limit the duration of the video with the available time the user is allowed to upload. My code only allows .avi and .mov .

4

2 回答 2

4

好的，正如我在评论中提到的，我对这个很感兴趣，所以我决定四处看看，看看有什么可能。简短的回答，不是很多。但以非常有限的方式看起来......有点可能。

我想先说这本身并不是一个真正的答案，而是一个概念验证。它使用了一些 HTML5 功能，比如<video>和FileReader- 我认为可能可以读取<video>标签的持续时间，所以我在谷歌上做了一些搜索。

因为它们在旧浏览器上显然会失败......我只在 Chrome 上检查过这个。我不知道FileReader在 Firefox 中是否以不同的方式实现。我也不能代表其他视频格式等。

无论如何，我当然不会依赖它进行验证，但它可能是现代浏览器“方便”验证功能的起点？

我仍然认为，这里唯一强大的全面验证解决方案是：

  • 允许将不超过合理大小限制的任何视频上传到您的服务器。
  • 在对文件本身执行第二遍验证的服务器上创建一个队列/异步进程。正如我提到ffmpeg的，这里可能是一个不错的选择？
    • 向用户发送成功/失败电子邮件？

顺便说一句，这是一个 SO 答案，演示了使用 ffmpeg 获取视频的长度

创建一个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 回答