Question

我使用Extjs 4.2和php上传视频。但我想用允许用户上传的可用时间来限制视频的持续时间。我的代码只允许.avi和.mov。

Answer 1

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

我想通过说这本身并不是一个真正的答案，更多的是概念验证。它使用了一些HTML5功能，例如<video>和FileReader - 我认为可能会读取<video>标记的持续时间，因此我对此进行了相当多的Google搜索。

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

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

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

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

顺便提一下，这是一个展示getting length of a video using 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);

})();

粗糙准备好了！

这是jsbin example
这是MDN FileReader API Reference

HTML5 Rocks文档确实非常有用。

希望这会有所帮助：）

Answer 2

我不确定是否有可能在客户端（Extjs）找到视频长度或验证视频长度。

有什么方法可以确定并限制上传视频的持续时间吗？

2 个答案: