更改 html5 视频标签上的源

javascript html video load

2022-08-30 01:47:33

我正在尝试构建一个随时随地都可以使用的视频播放器。到目前为止，我将使用：

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

（正如在几个网站上看到的那样，例如每个人的视频）到目前为止，一切都很好。

但现在我也想要某种播放列表/菜单以及视频播放器，从中选择其他视频。这些应该立即在我的播放器中打开。因此，我将不得不使用Javascript“动态更改视频的源”（如 dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - “让我们看另一部电影”部分所示）。让我们暂时忘记Flash播放器（以及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中有一个不错的页面，您可以在其中观察我遇到的问题：http://www.w3.org/2010/05/video/mediaevents.html

一旦我触发了该方法（请注意，在Firefox中），视频播放器就会死亡。load()

现在我发现，当我不使用多个标签，而只使用标签中的一个属性时，整个事情在Firefox中确实有效。<source>src<video>

所以我的计划是只使用该属性，并使用canPlayType（）函数确定适当的文件。src

我是以某种方式做错了还是使事情复杂化？

答案 1

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

这是“一个”香草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>

外部链接

答案 2

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

我所做的是我没有使用.不知何故，这搞砸了事情，因为视频只在第一次调用load（）时才起作用。相反，我在视频标签->中使用了source属性，并使用Modernizr来确定浏览器支持的格式。<source><video src="blabla.webm" />

<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（）。。