小编sas*_*shn的帖子

我正在尝试构建一个适用于任何地方的视频播放器.到目前为止我要去:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(如在几个网站上看到的,例如每个人的视频)到目前为止,非常好.

但现在我也想要一些播放列表/菜单以及视频播放器,我可以从中选择其他视频.那些应该马上在我的播放器中打开.所以我将不得不"动态改变视频的来源"(见dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - section"让我们来看看另一部电影")用javascript.让我们暂时忘记flashplayer(以及IE)部分,我将稍后尝试处理.

所以我的JS改变<source>标签应该是这样的:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

问题是,这在所有浏览器中都不起作用.即,firefox = O有一个很好的页面,你可以在那里观察我遇到的问题:http://www.w3.org/2010/05/video/mediaevents.html

一旦我触发load()方法(在Firefox中,请注意),视频播放器就会死机.

现在我发现当我不使用多个<source>标签,而只是标签中的一个src属性时<video>,整个事情都可以在firefox中运行.

所以我的计划是使用该src属性并使用canPlayType()函数确定适当的文件.

我是以某种方式做错了还是让事情变得复杂？