试图添加一个多视频播放器与多个视频？ [英] trying to add a multi source video player with more then one video?

问题描述

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

Im trying to make a video player work in all browsers. There is more then one video and every time you click on demo reel it plays the video and if you click the video 1 the other video plays. How can i make them both work in all browsers? Here is my html and 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

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

}

推荐答案

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

After you switch the source of the video, you need to run .load() on it to force it to load the new file. Also, you need to provide multiple formats, because there is no video codec supported by all browsers.

首先，设置您的源代码如下：

First, set up your sources like this:

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...
];

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

Then, your switch function should look like this:

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，直到找到它喜欢的URL。在每个源元素上设置type属性会提前告诉浏览器它是什么类型的视频，因此它可以跳过它不支持的视频。否则，它必须命中服务器以检索标题并找出它是什么类型的文件。

This gives the browser a list of different formats to try. It will go through each URL until it finds one it likes. Setting the "type" attribute on each source element tells the browser in advance what type of video it is so it can skip the ones it doesn't support. Otherwise, it has to hit the server to retrieve the header and figure out what kind of file it is.

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

This should work in Firefox going back to 3.5 as long as you provide an ogg/theora file. And it will work in iPads, because you only have one video element on the page at a time. However, auto-play won't work until after the user clicks play manually at least once.

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

For extra credit, you can append a flash fallback to the video element, after the source tags, for older browsers that don't support html5 video. (i.e., IE < 9 - though you'll need to use jQuery or another shim to replace addEventListener.)

这篇关于试图添加一个多视频播放器与多个视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！