Question

我试图让视频播放器在所有浏览器中都能正常运行。有   超过一个视频，每次你点击演示卷轴它播放   视频，如果您点击视频1，则播放另一个视频。我怎么能够   让它们都适用于所有浏览器？这是我的html和javascript

HTML

<video id="myVideo" controls autoplay></video>
    <div>
        <a href="#" onClick="changeVid1();">Demo Reel</a></div>
    <a href="#" onClick="changeVid2();">video 1</a></div>

    </div>

的javascript

function changeVid1() {
    var changeStuff = document.getElementById("myVideo");
     changeStuff.src = "video/demoreel.mp4"

}

function changeVid2() {
    var changeStuff = document.getElementById("myVideo");
     changeStuff.src = "video/video1.mp4";

}

Answer 1

切换视频源后，需要在其上运行.load()以强制加载新文件。此外，您需要提供多种格式，因为所有浏览器都不支持视频编解码器。

首先，设置这样的来源：

var sources = [
    {
        'mp4': 'http://video-js.zencoder.com/oceans-clip.mp4',
        'webm':'http://video-js.zencoder.com/oceans-clip.webm',
        'ogg':'http://video-js.zencoder.com/oceans-clip.ogv'
    }
    // as many as you need...
];

然后，您的开关功能应如下所示：

function switchVideo(index) {
    var s = sources[index], source, i;
    video.innerHTML = '';
    for (i in s) {
        source = document.createElement('source');
        source.src = s[i];
        source.setAttribute('type', 'video/' + i);
        video.appendChild(source);
    }
    video.load();
    video.play(); //optional
}

See a working demo here.

这为浏览器提供了要尝试的不同格式的列表。它将遍历每个URL，直到找到它喜欢的URL。在每个源元素上设置“type”属性会事先告诉浏览器它是什么类型的视频，因此它可以跳过它不支持的视频。否则，它必须命中服务器以检索标题并找出它是什么类型的文件。

只要您提供ogg / theora文件，这应该可以在Firefox中恢复到3.5。它可以在iPad中使用，因为您一次只能在页面上有一个视频元素。但是，在用户至少手动点击一次播放之后，自动播放才会起作用。

对于额外的功劳，您可以在源代码之后为不支持html5视频的旧版浏览器追加视频元素的闪回后备。（即，IE <9 - 尽管您需要使用jQuery或其他填充程序来替换addEventListener。）

试图添加一个多源视频播放器与多个视频？

1 个答案: