首页 文章

使用HTML5视频标记支持桌面和移动客户端

提问于
浏览 次
2

通常将视频嵌入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();
    }
}

注意：忽略事件处理程序前面的某人 . 我在我的前端框架上实现了一个自定义事件处理程序，我直接从 生产环境 代码中复制了它 .

通常是我处理视频的方式足以使其无缝播放回用户 . 哪个工作正常，但在移动设备上...因为它如此庞大的视频文件需要很长时间才能加载并且老老实实地破坏了体验 .

答案是提供移动版和桌面吗？

<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标签会更好？如果是这样，我可以使用一些方向......

html5 video video-streaming html5-video

1 回答

  • 0

    我有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通常用于保持质量和速度而不会牺牲太多 .

    回复于

相关问题