改变html5视频标签的来源 [英] changing source on html5 video tag

问题描述

我正在尝试构建一个适用于任何地方的视频播放器。到目前为止，我会与：

 < video> 
< source src =video.mp4>< / source> 
< source src =video.ogv>< / source> 
< object data =flowplayer.swftype =application / x-shockwave-flash> 
< param name =movievalue =flowplayer.swf/> 
< param name =flashvarsvalue ='config = {clip：video.mp4}'/> 
< / object> 
< / video> 
  

（如在几个网站上看到的，例如 video for everyone ）
到目前为止，这么好。

但现在我也想要一些播放列表/菜单以及视频播放器，我可以从中选择其他视频。这些应该立即在我的玩家中打开。所以我将不得不动态改变视频的来源（如 dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - 让我们看看另一部电影）与JavaScript。让我们暂时忘掉flashplayer（也就是IE）的一部分吧，我会尽力在后面处理。

所以我的JS改变了<$ c $

 < script>标签应该是这样的：
 
函数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

只要我触发这个视频播放器会死掉。现在我已经发现，当我不使用多个<$ c $时， c>< source> 标签，但是在< code>标签中只有一个src属性，整个事情都可以在Firefox中使用。



所以我的计划是只使用该src属性并使用 canPlayType（）函数。

am我以某种方式做错了或使事情变得复杂？

解决方案

我讨厌所有这些答案，因为它们太短或依赖于o

这是一个一个vanilla JS的做法，在Chrome中工作，请在其他浏览器中测试：

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

HTML：

 < video id =videowidth = 320height =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）; 
  

i'm trying to build a video player, that works everywhere. so far i'd be going with:

<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>

(as seen on several sites, for example video for everybody) so far, so good.

but now i also want some kind of playlist/menu along with the video player, from which i can select other videos. those should be opened within my player right away. so i will have to "dynamically change the source of the video" (as seen on dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - section "Let's look at another movie") with javascript. let's forget about the flashplayer (and thus IE) part for the time being, i will try to deal with that later.

so my JS to change the <source> tags should be something like:

<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>

problem is, this doesnt work in all browsers. namely, firefox =O there is a nice page, where you can observe the problem i'm having: http://www.w3.org/2010/05/video/mediaevents.html

as soon as i trigger the load() method (in firefox, mind you), the video player dies.

now i have found out that when i don't use multiple <source> tags, but instead just one src attribute within the <video> tag, the whole thing DOES work in firefox.

so my plan is to just use that src attribute and determine the appropriate file using the canPlayType() function.

am i doing it wrong somehow or complicating things??

解决方案

I hated all these answers because they were too short or relied on other frameworks.

Here is "one" vanilla JS way of doing this, working in Chrome, please test in other browsers:

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);

这篇关于改变html5视频标签的来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！