制作 HTML5 视频播放列表的最佳方法？答案

【问题标题】：Best Way to Make a HTML5 Video Playlist?制作 HTML5 视频播放列表的最佳方法？
【发布时间】：2011-12-24 23:02:25
【问题描述】：

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

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

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

我想一定有更好的办法……

【问题讨论】：

仅仅改变src属性还不够吗？
您需要修改 src 或重新创建
@powerbuoy // 我没试过。我会试试的。
@MikkoOhtamaa // 会尝试你的建议。

标签： html video playlist

【解决方案1】：

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

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

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

您可以通过

轻松获取扩展

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

sourceString 是一个变量，包含你的源的 url

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

【讨论】：