HTML5視頻 - 在顯示視頻之前海報圖像是否應該過早消失？

我有一個完整寬度的背景視頻，請參閱www.sparkengine.tv - 並非所有內容都已完成。但問題是有些用戶正在看海報圖片，然後在視頻加載之前就消失了，看起來不是很完美。我想象使它看起來像靜止的海報圖像剛剛開始移動。HTML5視頻 - 在顯示視頻之前海報圖像是否應該過早消失？

我見過的其他網站沒有這個問題...

這是正常的嗎？有沒有修復？

亨利

來源

2013-10-03 Henryz

我會做這樣的事情：

設置自動播放西元ATTR爲false。
添加腳本：

瓦爾VID =的document.getElementById（「bgVid」）; vid.oncanplay = vid.play（）;

，或者，你可以嘗試：

vid.oncanplaythrough = vid.play();

來源

2013-10-03 18:20:19 Todd

我可以考慮的唯一解決方案將使這樣的事情：

HTML：

<div id="video-container" style="position:relative; overflow:auto"> 
<img src="poster.jpg" id="videoposter" width=600 style="position:absolute; z-index:2" /> 
<video src="video.mp4" poster="poster.jpg" style="width:600px; height:400px"></video> 
</div> 

<a href="#" id="videoplay">Play the video</a>

JAVASCRIPT

var video = document.getElementById('videoelement'); 

var btn_play = document.getElementById('videoplay'); 
btn_play.onclick = function() { 
video.currentTime = 0; 
video.play(); 
}; 

video.onloadeddata = function() { 
document.getElementById('videoposter').style.display = 'none'; 
};

來源

2013-10-03 18:21:53

我認爲海報圖片在視頻開始播放之前稍微消失是正常現象。我會解決這個問題的方法是在視頻前添加一個圖像。告訴視頻開始播放後，等待視頻元素上的播放事件被觸發。然後隱藏（甚至快速淡出）圖像。

事情是這樣的：

var playedBefore=false,myvideo=document.getElementById('myvideo') 
myvideo.addEventListener('playing', 
    function(){ 
     if(!playedBefore){ 
      setTimeout(function(){ 
       document.getElementById('myposter').style.display='none'; 
      },100);// Just a little extra time. 
     } 
     playedBefore=true; 
    }); 
myvideo.play();

你可以亂用事件和函數調用在http://www.w3.org/2010/05/video/mediaevents.html。

另一件要做的事情是在視頻播放之前調用load()方法，然後再播放它，以便在您撥打play()函數時準備播放。

下面是一個JSFiddle，它可以完成所有這些工作，並且可以淡化海報：http://jsfiddle.net/jdwire/CM4dg/

來源

2013-10-03 18:23:35

HTML5視頻 - 在顯示視頻之前海報圖像是否應該過早消失？

回答

相關問題