2

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

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

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

我认为必须有更好的方法...

4

1 回答 1

2

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

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

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

您可以通过以下方式轻松获取扩展名

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

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

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

于 2011-12-26T12:25:24.687 回答