HTML5 - 如何流式传输大型.mp4文件？ [英] HTML5 - How to stream large .mp4 files?

问题描述

我正在设置一个非常基本的html5页面，该页面加载了一个20MB的.mp4视频。看起来，浏览器需要下载整个内容，而不是仅仅播放视频的第一部分和其他内容。

这篇文章是我在搜索时找到的最接近的东西......我尝试了双手制动和数据循环通过这两种方式都没有什么不同：

关于如何做到这一点的任何想法或者可能吗？

以下是我使用的代码： $ b

 < video controls =controls> 
< source src =/ video.mp4type =video / mp4/> 
您的浏览器不支持视频标记。 
< / video> 
  

解决方案

1. 确保 moov （元数据）在<$ c之前$ c> mdat （音频/视频数据）。这也称为快速启动或网络优化。例如， Handbrake有一个Web优化复选框，并且 ffmpeg 和 avconv 有输出选项 -movflags faststart 。


2. 确保您的web服务器正在报告正确的Content-Type（视频/ mp4）。 确保您的Web服务器配置为提供字节范围请求。


3. 确保您的Web服务器未在mp4文件的压缩之上应用gzip或deflate compression。

您可以检查您的网站发送的标题服务器使用 curl -I http：//yoursite/video.mp4 或使用浏览器中的开发人员工具（ Chrome ， Firefox ）（如果页面已缓存，则重新加载页面）。 HTTP响应头应该包含 Content-Type：video / mp4 和 Accept-Ranges：bytes ，并且不包含 Content-Encoding 。 p>

I'm trying to setup a very basic html5 page that loads a .mp4 video that is 20MB. It appears that the browser needs to download the entire thing rather than just playing the first part of the video and streaming in the rest.

This post is the closest thing I've found while searching... I tried both Hand Brake and Data Go Round by neither appeared to make a difference:

Any ideas on how to do this or if it's possible?

Here is the code I'm using:

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

解决方案

1. Ensure that the moov (metadata) is before the mdat (audio/video data). This is also called "fast start" or "web optimized". For example, Handbrake has a "Web Optimized" checkbox, and ffmpeg and avconv have the output option -movflags faststart.
2. Ensure that your web server is reporting the correct Content-Type (video/mp4).
3. Ensure that your web server is configured to serve byte range requests.
4. Ensure that your web server is not applying gzip or deflate compression on top of the compression in the mp4 file.

You can check the headers being sent by your web server using curl -I http://yoursite/video.mp4 or using the developer tools in your browser (Chrome, Firefox) (reload the page if it is cached). The HTTP Response Header should include Content-Type: video/mp4 and Accept-Ranges: bytes, and no Content-Encoding:.

这篇关于HTML5 - 如何流式传输大型.mp4文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！