支持桌面和移动客户端HTML5视频标签

通常嵌入视频成HTML5页面我使用以下命令：支持桌面和移动客户端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标签？如果多数民众赞成的情况下，我可以使用一些方向...

来源

2013-07-21 ryandlf

我有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秒左右设置一次关键帧。这可以创建多个并发流或下载而不是一个。 SD或更小视频的目标比特率为.8 - 1.6，而HD为1.4 - 2.8通常用于保持质量和速度，而不会牺牲太多。

来源

2013-08-01 13:26:54

支持桌面和移动客户端HTML5视频标签

回答

相关问题