HTML5視頻不會循環

我有一個視頻作爲網頁的背景，我試圖讓它循環。這裏是代碼：HTML5視頻不會循環

<video autoplay='true' loop='true' muted='true'> 
    <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source> 
</video>

即使我告訴視頻循環，它不會。我也試圖讓它循環與onended屬性（根據this Mozilla support thread，我也嘗試了一點jQuery）。到目前爲止沒有任何工作。這是Chrome或我的代碼問題嗎？

編輯：

我檢查了網絡事件和工作副本（http://fhsclock-labs.heroku.com/no-violence）與我試圖讓工作塗抹頭。不同之處在於工作副本從Heroku上的靜態資源（通過Varnish顯然）提供視頻，而我的是從GridFS（MongoDB）提供的。

Chrome Inspector的Network標籤顯示在我的應用程序中，視頻被請求三次。有一次狀態是「未決」，第二個是「取消」，最後一個是200 OK。工作副本只顯示兩個請求，其中一個狀態處於掛起狀態，另一個是206部分內容。但是，在視頻播放一次之後，該請求會變爲「已取消」，並會再次請求該視頻。在我的應用程序中，這沒有發生。

至於類型，在我的應用程序中，兩個是「未定義」，另一個是「視頻/ mp4」（它應該是）。在工作應用程序中，所有請求都是「video/mp4」。

此外，我在控制檯中收到Resource interpreted as Other but transferred with MIME type undefined.警告。

我不太確定從哪裏開始。我相信這個問題是服務器端的問題，因爲靜態資產可以正常工作。可能是服務器沒有發送正確的內容類型。這可能是GridFS的一個問題。我不知道。

無論如何，來源是here。任何你可以提供的洞察力是值得讚賞的。

來源

2011-11-11 Ethan Turkeltaub

100

啊，我只是偶然發現了這個確切的問題。

事實證明，循環（或任何排序求的，對於這個問題）在Chrome <video>元素，只要視頻文件擔任了由理解部分內容請求服務器的工作原理。即服務器需要遵守包含具有206「部分內容」響應的「範圍」標頭的請求。如果視頻足夠小以便可以通過鍍鉻進行全面緩衝，並且不再進行服務器往返，那麼情況更是如此：如果您的服務器第一次沒有兌現鍍鉻的範圍請求，則該視頻不會是可循環或可尋找的。

所以，是的，GridFS的問題，雖然可以說鉻應該更寬容。

來源

2012-03-03 20:02:20 afri

剛剛有同樣的問題。我正在使用nginx，因此我必須清除nginx，使用http://nginx.org/en/docs/http/ngx_http_mp4_module.html從源代碼安裝，然後重新啓動所有內容。 – chriscauley

同樣發生在php內置服務器上（在我的開發環境中）。 –

與Django 1.7.10 runserver相同的問題。 –

看起來像它在過去的一個問題，也有它至少有兩個被修正的bug，但兩者的狀態，它是固定的：

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

由於Chrome和Safari都使用基於webkit的瀏覽器，您可能可以使用以下某些解決方法： http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/

function restartVideo(){ 
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well. 
vid.play(); 
} 

//loop video 
vid.addEventListener('ended', restartVideo, false);

來源

2011-11-11 01:32:27 John

這似乎並沒有爲我工作。 –

不適用於Chrome 24.儘管在Safari和IE9中可用。 – Matt

無法使用HTTP 200 OK。 – Ramesh

我的情況：然而

我有相同的問題，改變單純的響應消息沒有做的頭。沒有循環，重放或尋求。也是一個純粹的停止不起作用，但這可能是我的配置。

答：

據一些網站（無法找到它們了）它也有可能觸發load（）方法中的視頻結束之後，和下一個應該開始之前。這應該重新加載源導致再次工作的視頻/音頻元素。

@約翰

請注意，您的答案/鏈接是正常的錯誤，而不是專注於這個問題。使用服務器/網絡服務器是導致此問題的原因。而這些鏈接描述的錯誤是不同的。這也是爲什麼答案不起作用。

我希望它有幫助，我仍然在尋找解決方案。

來源

2012-12-05 09:45:04 WhoKnows

我實際上最終做的是從不同的來源提供服務：在使用MongoDB的GridFS之前。我相信這個問題源於錯誤地提供文件。我現在在使用Amazon S3時沒有問題。 –

哦..我們也解決了它，但我不能真正解釋它。似乎範圍請求並不適用於該服務，因此我們將這些行添加到了我們的下載文件的方法中。 response.Headers.Add（「Accept-Ranges」，「bytes」）; （「Content-Range」，rangeValue.Replace（「=」，「」）+（resource.Value.Length - 1）.ToString（）+「/」+ resource.Value.Length.ToString （））; response.StatusCode = HttpStatusCode.PartialContent; 這啓用了範圍請求，並操縱頭讓服務器等知道它的範圍請求。代碼206而不是200. – WhoKnows

response.Headers.Add（「Accept-Ranges」，「bytes」）; response.Headers.Add（「Content-Range」，rangeValue.Replace（「=」，「」）+（resource.Value.Length - 1）.ToString（）+「/」+ resource.Value.Length.ToString（））; response.StatusCode = HttpStatusCode.PartialContent; – WhoKnows

簡單的解決方法：

$('video').on('ended', function() { 
    this.load(); 
    this.play(); 
});

當視頻播放到結束的'ended'事件觸發，video.load()重置視頻開始，video.play()開始玩它立即一旦加載。

這適用於Amazon S3，其中您沒有對服務器響應的太多控制權，並且還會解決與video.currentTime相關的Firefox問題，如果視頻缺少其長度元數據，則無法設置。

類似的JavaScript沒有jQuery的：

document.getElementsByTagName('video')[0].onended = function() { 
    this.load(); 
    this.play(); 
};

來源

2015-02-25 21:15:35 d2vid

有沒有機會知道jQuery無關的等價物？ –

@BrianMorton增加了無jQuery代碼。 – d2vid

它是瘸子超Dropbox的，但使用權狀態代碼。所以上傳到Dropbox並用dl替換www。

因此，使用Dropbox的網址視頻播放罰款。

來源

2015-04-11 01:31:29 gabrielstuff

我知道這並不完全與所問的問題有關，但如果有人在遇到類似問題時遇到此問題，請確保您的資源正確無誤。

我當時正在加載一個mp4和一個webm文件，並注意到該視頻並未在Chrome中循環播放。這是因爲webm文件是第一個source，因此Chrome正在加載webm文件，而不是mp4。

希望能夠幫助解決此問題的其他人。

<video autoplay loop> 
    <source src="/path-to-vid/video.mp4" type="video/mp4"> 
    <source src="/path-to-vid/video.webm" type="video/webm"> 
</video>

來源

2016-01-13 20:11:38 ferne97

爲防止上述任何答案對您有所幫助，請確保您的檢查器沒有運行且禁用了緩存選項。由於Chrome從緩存中抓取視頻，因此基本上只能使用一次。只是調試了20分鐘，才意識到這是原因。作爲參考，所以我知道我不是唯一一個someone else's chromium bug report。

來源

2016-04-11 23:15:44 srussking

HTML5視頻不會循環

回答

相關問題