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

我遇到了同样的问题。虽然这并没有解决海报问题，但它实现了我认为你所希望的。我不得不完全删除海报并添加一个带有显示的图像：我用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();
}

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

2 个答案: