html - 制作 HTML5 视频播放列表的最佳方式？

Question

我正在尝试使用现代浏览器中的 HTML5 视频功能制作播放列表。

到目前为止，我发现的唯一方法是删除视频标签，然后使用如下所示的不同来源再次附加它。

$("second video link").click (function(){
   $("#video wrapper").remove();
   $("#video wrapper").append(" new video tags ");
});

我想一定有更好的方法...

Answer 1

答案取决于您喜欢哪种方法以及您希望向哪些浏览器提供视频服务。如果您通过 source 子元素提供了多个源，则 IE9 会在 video.src() 函数上失败。如果您只需要一个浏览器即可工作，请查看 caniuse.com 的 webm 和 mp4 以查看哪个浏览器支持哪个编解码器。如果您发现您需要多个编解码器，因为您的观众同时使用 mp4- 和 webm-only 浏览器，您必须在使用 .src() 函数之前检查 .canPlayType() 并消除可能失败的来源(尽管这张支票也不是防弹的)。 Android 2.2(或者是 2.1，请指正)根本不知道该功能。一些 Mac OSX 浏览器有类似的问题 afaik。

底线:您应该使用 canPlayType() 的组合来过滤错误的源，然后使用数组或任何其他可排序列表来获取下一个视频源并在视频元素触发“结束”事件后设置它使用 src() 函数。我还喜欢在更改源时设置视频元素的类型属性，以规避某些浏览器的怪癖。

可能的类型是:video/mp4 用于 mp4 和 m4v 文件； video/webm 用于 webm 文件； video/ogg 用于 ogv 文件；要么通过某种服务器端脚本提供类型，要么检查 JS 中的文件扩展名，然后执行 switch() {...} 或 if else()...

您可以通过

轻松获得扩展

var sourceExt = (sourceString.split(".")).pop(); 

其中 sourceString 是一个包含源 url 的变量

此外，您应该检查浏览器规范以符合其对视频的要求。例如，iOS 要求使用基线配置文件对 mp4 进行编码