HTML5視頻控件 - 僅在Chrome中暫停後才能播放

Question

Hiya如果可能的話，我希望得到一些幫助。我有一個HTML5視頻，在Chrome中查看時顯得很奇怪。

當用戶第一次玩遊戲時，視頻播放。 如果他們點擊暫停，視頻暫停。但是，然後播放按鈕根本不起作用，並且使視頻播放的唯一方法是單擊視頻屏幕。

關於爲什麼會發生這種情況以及我該如何解決此問題的任何想法？

下面是我使用的代碼：

<video width="560" height="320" preload controls> 
<source src="videos/Testimonial2.mp4" type="video/mp4" /> 
<source src="videos/Testimonial2.ogv" type="video/ogg" /> 
<source src="videos/Testimonial2.webm" "type=video/webm" /> 
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="320"> 
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
<param name="wmode" value="transparent" /> 
<param name="bgcolor" value="#FFFFFF" /> 
<param name="quality" value="high" /> 
<param name="allowFullScreen" value="true" /> 
<param name="allowscriptaccess" value="always" /> 
<a href="http://www.adobe.com/go/getflash"> 
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
</a> 
<param name="flashvars" value="vdo=videos/Testimonial2.flv&amp;autoplay=false" /> 
<!--[if !IE]>--> 
</object> 
<!--<![endif]--> 
</object> 
</video> 

謝謝:)

Answer 1

我今天剛碰到了同樣的問題。只有Chrome導致了這個問題。我會播放視頻，然後在任何時間之後，我會暫停播放。試圖在暫停任何時間段後恢復視頻時，它會播放一秒鐘然後凍結。

我發現的唯一解決方案是設置preload =「none」。我不確定這是爲什麼會奏效，但它確實適合我。問題是我不再顯示預覽圖像，所以我正在使用Internet Explorer的解決方法。我現在在所有瀏覽器上運行此解決方法。見下文。

<div style="display:inline-block; margin-top:-14px; padding:5px;"> 
    <video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls> 
    <source src="videos/video1.mp4" type="video/mp4"> 
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200"> 
     <param name="src" value="videos/video1.mp4"> 
     <param name="type" value="video/mp4"> 
     <param name="controller" value="true"> 
     <param name="autoplay" value="false"> 
     <embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed> 
    </object> 
    </video> 
    <script> 
    document.getElementById('video14').onclick = function() { 
     document.getElementById('video14').play(); 
     document.getElementById('video14').onclick = ''; 
     document.getElementById('video14').style.background = ''; 
    }; 
    </script> 
</div> 

上面，我給我的視頻一個播放按鈕的ID和背景圖像。然後，我設置了一些javascript來播放視頻，同時在第一次點擊後也刪除了onclick函數以及背景。您可以將此背景圖像設置爲您選擇的任何圖像。我通過使用播放按鈕保持簡單。您還可以使用海報屬性而不是設置背景圖片。如果你使用海報，那麼你不需要額外的JavaScript來刪除背景。

希望這會有所幫助。

-John

編輯：我試着用海報屬性，但它並沒有在IE9工作，與背景，因此堅持現在。也嘗試使用video.js與海報，但也沒有采取在IE9。我猜IE9不喜歡海報，嘿。

Answer 2

不幸的是，Slashin8r的回答沒有幫助我，但this answer沒有。基本上，我不得不重新安排我的資源，以便OGV和WEBM視頻在MP4之前出現。不知道爲什麼。我也離開了preload =「none」。似乎愚蠢，但嘿，無論工程，對不對？

BEFORE：

<video width="1920" height="1080" controls preload="none"> 
    <source src="example.mp4" type="video/mp4" /> 
    <source src="example.ogv" type="video/ogg" /> 
    <source src="example.webm" type="video/webm" /> 
</video> 

AFTER：

<video width="1920" height="1080" controls preload="none"> 
    <source src="example.ogv" type="video/ogg" /> 
    <source src="example.webm" type="video/webm" /> 
    <source src="example.mp4" type="video/mp4" /> 
</video>