Question

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

我到目前为止找到的唯一方法是删除视频代码，然后使用下面的其他来源再次添加它。

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

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

Answer 1

答案取决于您喜欢的方式以及您要为其提供视频的浏览器。如果您通过源子元素提供了多个源，则IE9在video.src（）函数上失败。如果您只需要一个浏览器，请查看caniuse.com以获取webm和mp4以查看哪个浏览器支持哪种编解码器。如果您发现需要多个编解码器，因为您的受众使用仅限mp4和webm的浏览器，则必须在使用.src（）函数之前使用.canPlayType（）进行检查，并消除失败的源（尽管这项检查也不是防弹。 Android 2.2（或它是2.1，请纠正我）根本不知道funciotn。一些Mac OSX浏览器也有类似的问题。

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

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

您可以通过

轻松获得扩展程序

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

其中sourceString是包含源

的url的变量

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

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

1 个答案: