为什么webkit浏览器在播放前需要下载整个html5视频（mp4）？ [英] Why do webkit browsers need to download the entire html5 video (mp4) before playing?

问题描述

从Chrome / Safari（最新和Chrome Canary）开始播放HTML5视频需要相当长的一段时间。在播放开始之前，整个视频文件需要下载。

在Firefox 18.0.2（HTML5）和IE 8,9,10（Flash）中，播放几乎是瞬间的。

在Chrome中，我在使用时遇到了以下问题：

• chrome本地播放器


• VideoJS http://videojs.com/


• MediaElementJS http://mediaelementjs.com/

ul>



我发现即使在Chrome中打开本地mp4（h264）文件也需要很长时间才能加载：开发者网络工具显示视频正在加载/挂起，这需要10-15秒钟在一个大文件上。



供参考，以下是视频：
http：/ /mediaelementjs.com/





在播放开始前下载完整的视频文件（5MB）。这个小视频并没有那么糟糕，但是对于一个大文件来说还是很痛苦的。





我有两个问题：





• Webkit是否支持渐进式下载/播放？


• 如果不是，是否有已知的解决方法？ b
  $ b

  谢谢
  

  解决方案

  正如Foaster所说，元数据块需要在视频的早期阶段这样视频就不需要加载它（这可能需要在整个视频中加载，如果它放在最后）。
  
  
  

  但是你没有需要产品网站上的一些黑盒 .exe 文件来移动元数据块。以下是如何使用旧 ffmpeg 的方法：

    ffmpeg \ 
   -i input.mp4 \ 
   -codec copy \ 
    - movflags faststart \ 
   -f mp4 output.mp4 
    

  这会：

  
  
  1. -i input.mp4 ：以 input.mp4 作为输入。
     
  2. -codec copy ：按原样复制流（不带编码/解码步骤）。
  
  
  3. -movflags faststart ：将元数据块移至开头。 $ c> -f mp4 output.mp4 ：格式化为MP4文件并输出名称 output.mp4 。
  
  

  链接到完整 ffmpeg 文档这里。各种平台的安装说明此处（简单的 brew安装ffmpeg 对于Mac用户来说已经足够了）。

  
  

  HTML5 video takes quite awhile to begin playing from Chrome/Safari (latest and Chrome Canary). It appears that the entire video file needs to download before playback begins.

  In Firefox 18.0.2 (HTML5) and IE 8,9,10 (Flash), the playback is almost instant.

  In Chrome, I've seen the issue while using:

  • chrome native player
  • VideoJS http://videojs.com/
  • MediaElementJS http://mediaelementjs.com/

  I find that even opening a local mp4 (h264) file in Chrome takes quite awhile to load: the developer network tools show that the video is loading/pending which takes 10-15 seconds on a large file.

  For reference, here is a video: http://mediaelementjs.com/

  The full video file (5MB) is downloaded before playback begins. Not so bad with this small video, but quite a pain with a large file.

  I have two questions:

  • Does Webkit support progressive download/playback?
  • If not, is there a known workaround?

  Thanks

  解决方案

  As Foaster said, the metadata block needs to be early in the video so that the video doesn't have to load up to it (which may entail loading in the entire video if it's placed at the end).

  But you don't need some black-box .exe file from a product website to move the metadata block. Here's how to do it with just good old ffmpeg:

  ffmpeg \
  -i input.mp4 \
  -codec copy \
  -movflags faststart \
  -f mp4 output.mp4
  

  This will:

  1. -i input.mp4: Take input.mp4 as input.
  2. -codec copy: Copy the stream as-is (with no encode/decode step).
  3. -movflags faststart: Move the metadata block to the start.
  4. -f mp4 output.mp4: Format as an MP4 file and output with the name output.mp4.

  Link to full ffmpeg documentation here. Installation instructions for various platforms here (a simple brew install ffmpeg is sufficient for Mac users).

  这篇关于为什么webkit浏览器在播放前需要下载整个html5视频（mp4）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！