更改html5视频标签上的源
我正在尝试建立一个在任何地方都可以使用的视频播放器。到目前为止，我会这样做：
<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>(就像在几个网站上看到的，例如video for everybody)到目前为止，一切都很好。
但现在我也想要一些播放列表/菜单，以及视频播放器，我可以从中选择其他视频。这些应该立即在我的播放器中打开。因此，我将不得不使用Javascript“动态更改视频的来源”(见dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ -“让我们看另一部电影”)。让我们暂时忘记Flash player (以及IE)部分，稍后我将尝试处理这一部分。
所以我修改<source>标签的JS应该是这样的：
<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>问题是，这并不是在所有浏览器中都有效。也就是说，在火狐中有一个很好的页面，在那里你可以观察到我遇到的问题：http://www.w3.org/2010/05/video/mediaevents.html
只要我触发load()方法(请注意，在Firefox中)，视频播放器就会死掉。
现在我发现，当我不使用多个<source>标记，而是在<video>标记中只使用一个src属性时，整个过程在火狐中都能正常工作。
因此，我计划只使用src属性，并使用canPlayType()函数确定适当的文件。
不知何故，我是做错了还是把事情复杂化了？
回答 12
Stack Overflow用户
发布于 2013-08-27 06:59:54
我讨厌所有这些答案，因为它们太简短了，或者依赖于其他框架。
这是一个普通的JS方式，在Chrome中工作，请在其他浏览器中测试：
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.mp4');
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
video.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
setTimeout(function() {
video.pause();
source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.webm');
source.setAttribute('type', 'video/webm');
video.load();
video.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
}, 3000);<video id="video" width="320" height="240"></video>
Stack Overflow用户
发布于 2011-03-21 05:03:42
Modernizr对我来说就像一个护身符。
我所做的是我没有使用<source>。不知何故，这把事情搞砸了，因为视频只在第一次调用load()时才起作用。相反，我在视频标记-> <video 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()。
Stack Overflow用户
发布于 2015-02-18 11:27:16
我用这个简单的方法解决了这个问题。
function changeSource(url) {
var video = document.getElementById('video');
video.src = url;
video.play();
}https://stackoverflow.com/questions/5235145
复制相似问题