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

【问题标题】：Set Duration of video playback with HTML5使用 HTML5 设置视频播放的持续时间
【发布时间】：2015-10-15 21:00:40
【问题描述】：

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

I.E.跳转到视频的第 25 分钟。

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

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

谢谢。

【问题讨论】：

标签： javascript html video

【解决方案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>

【讨论】：