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

Question

通常要将视频嵌入到 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 标签会更好？如果是这样的话，我可以使用一些指导...

Answer 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 通常可以在不牺牲太多的情况下保持质量和速度。