Question

我几天来一直试图在我个人网站的主页上获取特定行为。但我还没有找到任何好的解决方案。有人可以帮助我： - ）

我有一个主页，其中包含不同持续时间的短视频网格。我希望他们每个人完全在鼠标悬停上玩。在第二次悬停时，大多数应该正常重播，但有些应该向后播放。

我读到，向后播放视频在性能方面并不好，因为原生浏览器播放器不适合这种情况。所以我搜索了一个替代方案，并提出了以下想法：

将这些＆＃34;特殊＆＃34;的持续时间加倍视频，因此他们将他们的前向序列（1-2-3）和后向序列（3-2-1）集成在同一个文件中。在第一次悬停时，视频将播放其上半部分，仅在此之后，第二次悬停将播放下半部分。

这是一个 JSfiddle ，我将所有元素都用于测试...但我目前仍然处理我糟糕的JS技能。

HTML：

<video class="forward-backward">
  <source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
  <source src="http://tacco.fr/divers/forward-backward.webm" type="video/webm">
</video>

jQuery的：

var figure = $("video").mouseover(hoverVideo);
  function hoverVideo() {
    $(this).get(0).play();
};

在性能方面可能是一个非常糟糕的主意（因为文件大小要加载），所以我真的对任何其他人开放。

不要犹豫，问你是否有任何问题。非常感谢你： - ）

BTW：同时播放的视频不应超过5个......我不知道该怎么做......

Answer 1

我遇到了这个问题。我能想到的最佳解决方案是使用视频编辑器并反转视频文件本身。然后创建两个视频元素，一个以前向视频作为源，另一个以反向视频作为源。使用javascript，您可以显示正确的视频（并隐藏另一个视频），具体取决于您是希望视频向前还是向后播放。这有帮助吗？

在悬停时向前和向后播放HTML5视频

1 个答案: