使用 HTML5 播放器平移视频

Question

我正在寻找一种用HTML5 video player平移video的可能性。

它适用于一种基于网络的艺术项目。

我们得到了一个非常广泛的视频。

播放器应仅显示视频的细节，并应永久从左侧向右平移，并在右侧到达末尾时重新开始。

是否有具有此功能的播放器或可以使用某种插件扩展的播放器？

或者任何其他想法如何解决这个问题？

谢谢！

Answer 1

这可以通过一个容器来完成，该容器将具有显示窗口和overflow: hidden的尺寸，以及您可以根据需要移动的视频。你甚至不需要javascript，一个简单的CSS3动画就可以完成这项工作：

.container {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
}
.video {
  position: absolute;
  background: linear-gradient(to right, red , yellow);
  width: 1000px;
  height: 50px;
  animation: leftToRight 5s infinite;
}
@keyframes leftToRight{
  0% {left: 0px;}
  50% {left: -800px;}
  100% {left: 0px;}
}

<div class="container">
  <div class="video">
  </div>
</div>