設置不適用於FF或Safari的HTML5視頻

在www.graysonearle.com/bluemen/index2.html製作這個有趣的網絡項目，我遇到了各種各樣的問題。 SO上的某個人幫助我確保在播放之前加載視頻，但此解決方案僅適用於Chrome。下面是代碼：設置不適用於FF或Safari的HTML5視頻

for (var i=0;i<16;i++) { 
     document.write('<div class="vidBox" id="box'+i+'">'); 
     document.write(' <video class="vid" loop="loop" preload="metadata" id="vid'+i+'">'); 
     document.write(' <\/video>'); 
     document.write('<\/div>'); 
    } 


var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'videos/fullvid' + ext, true); 
xhr.responseType = 'blob'; 
xhr.onload = function(e) { 
    if (this.status == 200) { 
    console.log("got it"); 
    var myBlob = this.response; 
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob); 
    // myBlob is now the blob that the object URL pointed to. 
     for (var i=0;i<16;i++) { 
     display(i,vid) 
    } 
    } 
}; 
xhr.send(); 

     function display(i,vid){ 

    var video = document.getElementById("vid"+i); 
    console.log(video); 
    video.src = vid; 

}

編輯：澄清，我要的視頻這個4x4的方格加載（我將添加加載屏幕後可能）沒有自動播放必然。一旦加載，點擊PLAY ALL應該讓他們全部一起玩。點擊FISH在電影網格中創建一個模式。

來源

2013-02-25 prismspecs

我不知道爲什麼你使用document.write添加這些，但無論如何嘗試添加自動播放屬性的視頻，例如......

<video controls="controls" autoplay="autoplay"> 
    Your browser does not support the video tag. 
</video>

來源

2013-02-25 23:24:10

我能看看你的DOCTYPE。請注意，html5的doctype與早期版本的html不一樣。檢查您的Doctype。它應該只是<!DOCTYPE HTML>。

編輯正確的html5視頻標籤。我想你可能不得不修改你的語法。

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video>

，並注意您的視頻編解碼器也：

MP4 = MPEG 4個文件與H264視頻編解碼器和AAC音頻編解碼器

的WebM =的WebM與VP8視頻編解碼器和Vorbis音頻文件編解碼器

奧格= Ogg文件與Theora視頻編解碼器和Vorbis音頻編解碼器

這裏是別的東西，你可能需要爲某些瀏覽器播放視頻：

videoTag.src = "vid"; 
videoTag.load(); 
videoTag.play();

來源

2013-02-25 23:24:45

呃哦，被設置爲<！DOCTYPE html PUBLIC「 - // W3C // DTD HTML 4.01 // EN」>我會改變它......沒有改變。不過謝謝！ – prismspecs 2013-02-26 00:18:02

您的語法或瀏覽器版本應該是罪魁禍首。試試用純HTML測試代碼（沒有ajax和javascript）。只需嘗試使用html5在您的網頁上播放視頻，即可瞭解瀏覽器如何響應。我成功地播放了我的html5視頻，但他們都更新到最新版本。儘可能在鉻上工作。它必須與瀏覽器有關，而不是代碼。 – 2013-02-26 00:53:56

這是一個非常複雜的處理方式，當我有16個視頻在同一時間播放時，瀏覽器不能很好地播放。 – prismspecs 2013-02-26 00:57:12

除了要添加視頻到HTML中的「有趣」的方式，你倒是應該依靠HTML5 media events。首先，如果您希望視頻實際上自動加載，請不要使用preload="metadata"，因爲這隻會加載視頻元數據。設置預加載到"auto"應該有所幫助。或者，您可以將其完全保留，因爲auto是默認值。（雖然看起來只要Opera增加了對這個屬性的支持，他們可能會默認爲"metadata"，所以你可能會更好地將它設置爲"auto"。）

然後，擺脫整個XHR的混亂。然後，你可以做這樣的事情：

var videos = document.getElementsByTagName('video'); 

for(var i = 0, ii = videos.length; i < ii; i++) { 
    videos[i].addEventListener('canplaythrough',enablePlayback,false); 
} 

var videosLoaded = 0; 

function enablePlayback(e) { 
    videosLoaded++; 
    if(videosLoaded === 16) { 
    // enable a play button or do whatever you want 
    // in this case: start playing all the videos at once 
    for(var i = 0, ii = videos.length; i < ii; i++) { 
     videos[i].play(); 
    } 
    } 
}

此代碼基本上增加了一個偵聽器canplaythrough事件的所有視頻，然後爲每個視頻觸發的話，他們將通過一個遞增videosLoaded變量，當最後一個視頻會調用它，而videosLoaded會點擊16（4x4網格中的視頻數量），它會在所有視頻對象上調用play()。

你可能不得不爲此做一些實驗才能做到這一點（我手邊並沒有16個小型和短片視頻來對其進行充分測試），但是這應該會帶你到右邊方向。如果preload="auto"沒有下載所有視頻（可能會發生，因爲它們有很多），您可能還想查看video.load()。

如果既video.load()也不preload="auto"似乎做的伎倆，你可以設置所有視頻自動播放，然後偵聽play事件，並立即暫停他們（然後取出play事件偵聽器）。之後，與以前一樣，使用canplaythrough的代碼。

來源

2013-02-26 01:07:32 Daiz

非常感謝您抽出時間。我遇到的一個問題是，瀏覽器在加載8個視頻後會放棄。這是XHR的最初原因，但也許有更好的出路。在Chrome上檢查http://graysonearle.com/bluemen/index3.html – prismspecs 2013-02-26 19:03:18

哦，等等。重新加載頁面幾次後，它就可以工作。也許這個連接很糟糕...讓我知道它是否適合你。再次感謝。 – prismspecs 2013-02-26 19:04:36

設置不適用於FF或Safari的HTML5視頻

回答

相關問題