更改html5视频标记上的源代码

Question

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

<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()函数确定适当的文件.

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

Answer 1

我讨厌所有这些答案,因为它们太短或依赖于其他框架.

这是"一个"香草JS方式,在Chrome中工作,请在其他浏览器中测试:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Answer 2

Modernizr对我来说就像一个魅力.

我做的是我没有使用<source>.不知怎的,这搞砸了,因为视频只在第一次调用load()时工作.相反,我在视频标签中使用了source属性 - > <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().

Answer 3

你原来的计划听起来不错.您可能会发现更多关于动态管理<source>元素的浏览器怪癖,如W3规范说明所示:

当元素已插入视频或音频元素时动态修改源元素及其属性将不起作用.要更改正在播放的内容,只需直接在媒体元素上使用src属性,可能会使用canPlayType()方法从可用资源中进行选择.通常,在解析文档之后手动操作源元素是一种不经常[sic]复杂的方法.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

Answer 4

我用这个简单的方法解决了这个问题

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

Answer 5

而不是让相同的视频播放器加载新文件,为什么不擦除整个<video>元素并重新创建它.如果src是正确的,大多数浏览器会自动加载它.

示例(使用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);

Answer 6

根据规格

当元素已插入视频或音频元素时动态修改源元素及其属性将不起作用.要更改正在播放的内容,只需直接在媒体元素上使用src属性,可能会使用canPlayType()方法从可用资源中进行选择.通常,在解析文档之后手动操作源元素是一种不经常复杂的方法.

所以你要做的事情显然不应该起作用.

Answer 7

只需放置一个div并更新内容...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Answer 8

尝试将 OGG 源移至顶部。我注意到，当 Firefox 想要播放的 OGG 不是第一个时，它有时会感到困惑并停止播放器。

值得一试。