Question

我有一个简单的HTML5视频播放器，它使用TimeJump.js（http://davatron5000.github.io/TimeJump/）来允许直接跳转到特定的时间码。

即。跳到视频的第25分钟。

我想对播放的视频的持续时间添加限制。因此，用户一次只能观看60秒的视频。我不能使用媒体URL规范（即#t = 25,85），因为视频的开头会根据用户输入的URL字符串而改变（使用TimeJump.js跳转到视频中的点）

有关如何限制视频播放时长的任何想法？

感谢。

Answer 1

我从未使用过TimeJump.js，但您可以收听媒体元素的timeupdate事件（音频和视频）。

var video = document.querySelector('video');

video.addEventListener('timeupdate', function() {
  // don't have set the startTime yet? set it to our currentTime
  if (!this._startTime) this._startTime = this.currentTime;

  var playedTime = this.currentTime - this._startTime;

  if (playedTime >= 10) this.pause();
});

video.addEventListener('seeking', function() {
  // reset the timeStart
  this._startTime = undefined;
});

<video controls="true" height="200" width="300">
  <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">
  <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">
</video>

使用HTML5设置视频播放的持续时间

1 个答案: