悬停播放HTML5视频，导致海报无法显示，视频延迟

Question

好的，这里有一个奇怪的问题，我希望有人能够对此有所启发。 有问题的站点在这里： http : //tlt.voltronik.co.uk-请向下滚动到“最新剪辑/最受欢迎的剪辑”部分。

悬停时，应播放一些视频。 我已将发布者设置为视频的相关帧，以使他们不会总是使用第一帧，因为它并不总是最合适的。 这是我用于悬停时播放/暂停的js：

var vid = document.getElementsByClassName("video-hover");

[].forEach.call(vid, function (item) {
  item.addEventListener('mouseover', hoverVideo, false);
  item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e) {   
  this.play();
}

function hideVideo(e) {
  this.pause();
}

问题是（正如您可能已经发现的），有时海报会显示，有时却不会。 有时它们全部加载都没有失败，有时却没有。 但是，大多数情况下，当它们确实显示时，您将鼠标悬停在视频上并没有任何反应。 您必须将鼠标光标从视频上移开，然后将鼠标悬停在视频上才能播放视频。

我试图通过将海报的背景图像设置在视频后面来补偿未显示的海报，但这似乎也无法正常显示。

我认为这与rgba背景或后面播放的视差样式视频无关，因为此行为在“ Timelapse Clips”页面上也可见。

谁能阐明为什么会这样吗？

Answer 1

将mp4来源标签移到webm上方。

由于必须加载，因此视频第一次播放需要一点时间。 您可以设置preload =“ auto”以避免这种延迟。

Answer 2

我遇到了同样的问题。 尽管这不能解决发布者的问题，但可以实现我认为您希望的。 我必须完全删除海报，并添加带有display：none类的图像，该类在jQuery悬停时添加。 这是我的笔： http : //codepen.io/rhenwilson/pen/zIcBC 。

var figure = $("figure")
var vid = $("video");
var cover = $(".img-cover")
$(figure).hover(function()
       { $(cover).addClass("img-hide");
}, function()
        { $(cover).removeClass("img-hide");
}
);

[].forEach.call(vid, function (item) {
        item.addEventListener('mouseover', hoverVideo, false);
        item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e) {  
        this.play();
}

function hideVideo(e) {
        this.pause();
}