支持带有 HTML5 视频标签的桌面和移动客户端
Posted
技术标签:
【中文标题】支持带有 HTML5 视频标签的桌面和移动客户端【英文标题】:Support Both Desktop And Mobile Clients With HTML5 Video Tag 【发布时间】:2013-07-20 01:30:19 【问题描述】:通常将视频嵌入到 html5 页面中,我使用以下内容:
<video poster="">
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="video/demo.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="video/demo.ogg"></source>
<source type="video/webm; codecs="vp8, vorbis"" src="video/demo.webm"></source>
</video>
我知道,没有闪退。在这种情况下,我不需要一个,但这不是这个问题的目的。
我的问题是如何嵌入可以同时服务于移动和桌面浏览器的视频?假设这个演示视频大小在 20MB 范围内。像这样使用 canplaythrough:
var onCanPlay = function(event)
initLoad = false;
video.controls = true;
sb.removeEvent(this, 'canplaythrough');
sb.removeEvent(this, 'load');
return false;
;
if(initLoad)
video.play();
if(video.readyState !== 4)
video.addEventListener('canplaythrough', onCanPlay, false);
video.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
setTimeout(function()
video.pause(); //block play so it buffers before playing
, 1);
else
if(video.currentTime > 0 && video.paused == false)
video.play();
注意:忽略我的事件处理程序前面的 sb。我在前端框架上实现了一个自定义事件处理程序,并直接从生产代码中复制了它。
通常是我处理加载视频的方式,以便它可以无缝地播放给用户。效果很好,但在移动设备上...因为它的视频文件如此之大,需要很长时间才能加载,而且老实说会破坏体验。
答案是提供移动版和桌面版吗?
<video controls>
<source src="demo-small.webm" type="video/webm" media="all and (max-width:600px)">
<source src="demo.webm" type="video/webm">
</video>
我已经阅读了一些关于媒体查询从规范中删除的内容,这让我重新思考我是否以正确的方式提供视频。也许以某种方式从服务器流式传输视频并完全避免 HTML5 标记会更好?如果是这样的话,我可以使用一些方向......
【问题讨论】:
【参考方案1】:我有 2 条建议给你。首先利用预加载属性。
<video controls preload="auto" >
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="video/demo.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="video/demo.ogg"></source>
<source type="video/webm; codecs="vp8, vorbis"" src="video/demo.webm"></source>
渲染视频标签后,预加载将加载一定百分比的视频。
您可能知道也可能不知道海报图片可能会破坏某些 ios 设备,并且某些 iOS 设备必须存在控件。此外,mp4 必须是您拥有的第一个,但我只是注意到它,因为惊喜! iOS 设备首先需要它。如果您的 html5 版本满足所有这些条件但仍然无法在 iOS 设备上播放,请查看帧率、大小和比特率、基线或标准配置文件等。iOS 是一个挑剔的小 POS。
其次,如果您可以控制视频文件的渲染,请务必根据电影的长度每 10 秒左右设置一次关键帧。这可以创建多个并发流或下载,而不是一个。标清或更小视频的目标比特率为 0.8 - 1.6,高清的目标比特率为 1.4 - 2.8 通常可以在不牺牲太多的情况下保持质量和速度。
【讨论】:
以上是关于支持带有 HTML5 视频标签的桌面和移动客户端的主要内容,如果未能解决你的问题,请参考以下文章