使用HTML5播放器平移视频

Question

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

这是一种基于网络的艺术项目。

我们有一个非常广泛的视频。

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

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

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

谢谢！

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>