javascript - HTML5 视频 - 海报图像是否应该在显示视频之前过早消失？

Question

我有一个全宽背景视频，请参阅www.sparkengine.tv - 并非一切都完成了。但问题是一些用户看到海报图像，然后在视频加载之前消失，看起来不是很无缝。我想象让它看起来像静止的海报图像刚刚开始移动。

我看过其他网站没有这个问题...

这是正常的吗？有解决办法吗？

亨利

Answer 1

我认为在视频开始播放之前海报图像略微消失是正常的。我解决这个问题的方法是在视频前面添加一个图像。在您告诉视频开始播放后，等待视频元素上的播放事件被触发。然后隐藏（甚至快速淡出）图像。

像这样的东西：

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/

Answer 2

我会做类似的事情：

1. 将 vids 自动播放属性设置为 false。

2. 添加脚本：

   Var vid = document.getElementById("bgVid"); vid.oncanplay = vid.play();

或者，或者，您可以尝试：

vid.oncanplaythrough = vid.play();

Answer 3

我能考虑的唯一解决方案是这样的：

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';
};