【问题标题】:Is there any way I can determine and limit the duration of the video being uploaded?有什么方法可以确定和限制上传视频的持续时间吗?
【发布时间】:2013-11-18 14:33:44
【问题描述】:

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

【问题讨论】:

  • 您可以使用ffmpeg 在服务器端验证电影长度。这当然意味着您必须先上传电影,然后对其进行验证。如果您可以在客户端验证电影的长度,我不知道并且会感到惊讶......但是,知道您的首选上限,根据预期的视频大小和质量设置合理的文件上传限制,然后服务器端的第二阶段验证在这里可能是一个合理的策略?
  • 我已尝试将视频限制为仅 2mb。上传视频时似乎几乎不可能限制视频的持续时间。感谢您的回答!
  • 是的,似乎唯一可靠的解决方案是定义一个合理的球场文件限制(一个可以很好地平衡可能的视频质量和持续时间的文件)。然后作为第二阶段,在上传时运行 process/cron/queue 以使用 ffmpeg 或类似的东西在服务器端检查它们。我确实深入探索了可能适用于较新浏览器的可能解决方案,但它非常初级,不会很有用。我可能会发布它以提供一个起点,或者为某些浏览器提供一个功能,但是......我不认为它会有那么有用。我会再摆弄一下

标签: php video upload extjs4.2


【解决方案1】:

我不确定是否可以在客户端 (Extjs) 中找到视频长度或验证视频长度。

【讨论】:

    【解决方案2】:

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

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

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

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

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

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

    顺便说一下,这是一个 SO 答案,它演示了 getting length of a video using ffmpeg

    使用input[type=file] 元素创建一个页面test.html

    <!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 文档确实很有帮助。

    希望这会有所帮助:)

    【讨论】:

    • 请注意。除了使用 setInterval,您还可以收听“onCanPlayThrough”视频的事件:video.oncanplaythrough = function(){ console.log('duration:', this.duration); };
    • 哇,我完全忘记了这个问题。感谢@LeonardDrs 的更新——我之前没有听说过这个活动。我会对此进行调查,并尝试酌情更新问题。实际上,我实际上可能需要尽快使用这个概念证明,所以感谢您的提醒 :)
    猜你喜欢
    • 2013-05-19
    • 1970-01-01
    • 2020-04-23
    • 1970-01-01
    • 2017-12-18
    • 2018-05-01
    • 2014-07-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多