試圖添加多個視頻播放器和多個視頻？

我試圖讓一個視頻播放器在所有瀏覽器中工作。多於一個視頻有，每當您點擊演示卷軸時，它將播放視頻，如果您點擊視頻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"; 

}

來源

2012-12-03 zac

後您切換視頻源，則需要在其上運行給力它加載新文件。此外，您需要提供多種格式，因爲所有瀏覽器都不支持視頻編解碼器。

首先，設置你的來源是這樣的：

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直到找到它喜歡的一個。在每個源元素上設置「type」屬性會提前告訴瀏覽器它是什麼類型的視頻，以便它可以跳過它不支持的視頻。否則，它必須打到服務器才能檢索標題並找出它是什麼類型的文件。

只要你提供一個ogg/theora文件，這應該在Firefox回到3.5。它可以在iPad上運行，因爲您一次只能在頁面上看到一個視頻元素。但是，直到用戶至少手動點擊一次播放後，自動播放纔會起作用。

要獲得額外的功勞，您可以爲不支持html5視頻的舊版瀏覽器在源代碼之後爲視頻元素附加閃回回退。（即，IE < 9--儘管您需要使用jQuery或其他墊片來代替addEventListener。）

來源

2012-12-05 20:42:36 brianchirls

試圖添加多個視頻播放器和多個視頻？

回答

相關問題