我试图建立一个视频播放器,它在任何地方都能工作。到目前为止,我打算用:
<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 "Let's look at another movie")用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>
问题是,这在所有的浏览器上都不工作,也就是火狐 =O 有一个很好的页面,你可以观察我遇到的问题: http://www.w3.org/2010/05/video/mediaevents.html
我一触发load()方法(注意,是在火狐浏览器中),视频播放器就死了。
现在我发现,当我不使用多个lt;source>
标签,而只是在lt;video>
标签中使用一个src属性时,整个事情在firefox中是可行的。
所以我的计划是只使用那个src属性,并使用canPlayType()函数来确定适当的文件。
我是不是做错了,或者把事情搞复杂了?
Modernizr对我来说是个好办法。
我所做的是,我没有使用<source>
。不知怎的,这把事情搞砸了,因为视频只在第一次调用load()时起作用。相反,我使用了视频标签内的源属性--> <视频 src="blabla.webm" />
,并使用Modernizr来确定浏览器支持的格式。
<script>
var v = new Array();
v[0] = [
"videos/video1.webmvp8.webm",
"videos/video1.theora.ogv",
"videos/video1.mp4video.mp4"
];
v[1] = [
"videos/video2.webmvp8.webm",
"videos/video2.theora.ogv",
"videos/video2.mp4video.mp4"
];
v[2] = [
"videos/video3.webmvp8.webm",
"videos/video3.theora.ogv",
"videos/video3.mp4video.mp4"
];
function changeVid(n){
var video = document.getElementById('video');
if(Modernizr.video && Modernizr.video.webm) {
video.setAttribute("src", v[n][0]);
} else if(Modernizr.video && Modernizr.video.ogg) {
video.setAttribute("src", v[n][1]);
} else if(Modernizr.video && Modernizr.video.h264) {
video.setAttribute("src", v[n][2]);
}
video.load();
}
</script>
希望这能帮助你 :)
如果你不想使用Modernizr,你可以随时使用CanPlayType()。
与其让同一个视频播放器加载新的文件,为什么不擦除整个<视频>
元素,然后重新创建它。如果src's是正确的,大多数浏览器会自动加载它。
例子(使用Prototype):
var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });
vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });
$('container_div').update(vid);