Question

我有不同比特率的MP4视频文件，可以兼容Wifi和Edge连接上的iOS。我希望使用HTML5视频标记在我的网站上逐步加载它们。

在Wifi上为iOS编码的video_big.mp4
H.264 Baseline，25fps，640x480,500kbps

在Edge / 3G上为iOS编码的video_small.mp4
H.264 Baseline，25fps，320x240,56kbps

我的问题是：我如何编写HTML5视频标记，以便将 video_big.mp4 投放到通过Wifi连接的iOS设备，并将 video_small.mp4 投放到iOS设备通过Edge / 3G连接？我在PHP / Apache服务器上运行。谢谢:)）

Answer 1

遗憾的是，目前还没有可靠的方法来检测设备连接的网络类型（或速度）。

目前，您可以做的最好的事情就是依靠媒体查询来假设（可能不正确）小屏幕意味着小型设备，因此无论网络连接速度如何，都可以为其提供较低分辨率的视频。

例如：

<video controls>
   <source src="video_small.mp4" type="video/mp4" media="all and (max-width:360px)">
   <source src="video_big.mp4 " type="video/mp4">
</video>

Answer 2

您要寻找的是HTTP Live Streaming or HLS。其配置基于M3U播放列表，视频以MPEG-2 TS文件的形式存储到等长的片段中，并保存为.ts文件。

带有多个比特率视频的HTML5视频标签？

2 个答案: