Question

我是GSAP的新用户，我正在尝试启用拖动并使用GSAP点击自定义html5视频时间轴。我在GSAP论坛上看了几篇帖子，但有些东西我显然无法理解...

我在以下jsfiddle上复制了一个简化示例：https://jsfiddle.net/epigeyre/oLmk6b0d/2/

所以我从存储在变量中的元素创建我的draggable元素，将其绑定到它的容器（这是时间轴容器），然后添加我的函数onDrag（我猜点击将是相同的）。时间轴进度由时间轴容器内的div显示，该div在X轴上从0到1缩放。我认为链接到当前视频时间是可以的但动画不是（我不明白为什么翻译应用......）。

以下是具体代码段：

Draggable.create( timelineProgress, {
  type:'x',
  bounds: timeline, // My timeline container
  onDrag: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ;
  },
  onClick: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ;
  }
});

你能帮我理解一下去了吗？非常感谢你的帮助！

Answer 1

好的，这就是那些需要构建自定义视频播放器的解决方案。使用GSAP，您在Draggable插件中有一个非常有趣的trigger属性。

以下是我如何使其适用于HTML5视频时间轴。

var video = document.getElementsByTagName('video')[0],
    play = document.getElementsByClassName('video__play')[0],
    timeline = document.getElementsByClassName('timeline')[0],
    timelineProgress = document.getElementsByClassName('timeline__progress')[0],
    drag = document.getElementsByClassName('timeline__drag')[0];

// Toggle Play / Pause
play.addEventListener('click', togglePlay, false);

function togglePlay() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

// on interaction with video controls
video.onplay = function() {
  TweenMax.ticker.addEventListener('tick', vidUpdate);
};
video.onpause = function() {
	TweenMax.ticker.removeEventListener('tick', vidUpdate);
};
video.onended = function() {
	TweenMax.ticker.removeEventListener('tick', vidUpdate);
};

// Sync the timeline with the video duration
function vidUpdate() {
  TweenMax.set(timelineProgress, {
    scaleX: (video.currentTime / video.duration).toFixed(5)
  });
  TweenMax.set(drag, {
    x: (video.currentTime / video.duration * timeline.offsetWidth).toFixed(4)
  });
}

// Make the timeline draggable
Draggable.create(drag, {
  type: 'x',
  trigger: timeline,
  bounds: timeline,
  onPress: function(e) {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenMax.set(this.target, {
      x: this.pointerX - timeline.getBoundingClientRect().left
    });
    this.update();
    var progress = this.x / timeline.offsetWidth;
    TweenMax.set(timelineProgress, {
      scaleX: progress
    });
  },
  onDrag: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    var progress = this.x / timeline.offsetWidth;
    TweenMax.set(timelineProgress, {
      scaleX: progress
    });
  },
  onRelease: function(e) {
    e.preventDefault();
  }
});

video {
  display: block;
  width: 100%;
  height: auto;
}

.timeline {
  width: 100%;
  height: 10px;
  background-color: black;
  cursor: pointer;
  position: relative;
}

/* Here is the dragger that I will use to move the video 
* current time forward or backward.
* I have added a background color for you to see it
* but just remove it in production.
*/

.timeline__drag {
  width: 1px;
  height: 20px;
  top: -10px;
  background-color: yellow;
  position: absolute;
  z-index: 2;
  transform-origin: 0 0;
}

.timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
  transform: scaleX(0);
  transform-origin: 0 0;
  position: relative;
  z-index: 1;
}

button {
  margin-top: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/TweenMax.min.js"></script>

<video>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<div class="timeline">
  <div class="timeline__drag"></div>
  <span class="timeline__progress"></span>
</div>
<button class="video__play">Play / Pause video</button>

我要感谢GSAP论坛的Carl，感谢他的精彩帮助！

拖动视频时间轴并点击

1 个答案: