Pan video with HTML5 player

Question

I'm looking for a possibility to pan in a video with a HTML5 video player.

It's for a kind of web based art project.

We got a video which is very wide.

The player should show only a detail of the video and should permanently pan from the left to the right and start again when it reaches the end on the right side.

Is there a player with this feature or a player which could be extended with some kind of plugin?

Or any other thoughts how to solve this problem?

Thanks!

Answer 1

This can be done with a container that will have the dimensions of your display window and overflow: hidden, and the video inside that you move as you like. You don't even need javascript, a simple CSS3 animation can do the job:

.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>