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

问题描述

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

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.

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

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 Flash player (and thus IE) part for the time being, I will try to deal with that later.

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

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>

问题是，这不适用于所有浏览器.也就是说，在 Firefox 中有一个不错的页面，您可以在其中观察我遇到的问题:http://www.w3.org/2010/05/video/mediaevents.html

The problem is, this doesn't work in all browsers. Namely, in Firefox there is a nice page where you can observe the problem I'm having: http://www.w3.org/2010/05/video/mediaevents.html

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

As soon as I trigger the load() method (in Firefox, mind you), the video player dies.

现在我发现当我不使用多个 <source> 标签，而是在 <video> 中只使用一个 src 属性时; 标签，整个事情在 Firefox 中工作.

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.

所以我的计划是只使用 src 属性并使用 canPlayType() 函数.

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.

这里是一个"vanilla JS 这样做的方式，在 Chrome 中工作，请在其他浏览器中测试:

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

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>

外部链接

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