Question

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

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

这是正常的吗？有修复吗？

亨利

Answer 1

我会做类似的事情：

将vids autoplay attr设置为false。
添加脚本：

Var vid = document.getElementById（“bgVid”）; vid.oncanplay = vid.play（）;

或者，您可以尝试：

vid.oncanplaythrough = vid.play();

Answer 2

我能考虑的唯一解决办法就是这样：

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

Answer 3

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

这样的事情：

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/

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

3 个答案: