0

我试图让视频播放器在所有浏览器中工作。有不止一个视频，每次您单击演示卷轴时，它都会播放视频，如果您单击视频 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";

}
4

1 回答 1

0

切换视频源后，您需要对其运行.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...
];

然后，您的 switch 函数应如下所示：

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
}

在此处查看工作演示。

这为浏览器提供了可供尝试的不同格式的列表。它将遍历每个 URL，直到找到它喜欢的一个。在每个源元素上设置“类型”属性会提前告诉浏览器它是什么类型的视频，这样它就可以跳过它不支持的视频。否则，它必须访问服务器以检索标头并确定它是什么类型的文件。

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

对于不支持 html5 视频的旧版浏览器，您可以在源标记之后为视频元素附加 Flash 后备，以获得额外的功劳。（即，IE < 9 - 尽管您需要使用 jQuery 或其他 shim 来替换addEventListener.）

于 2012-12-05T20:42:36.360 回答