使用HTML5设置视频播放的持续时间 [英] Set Duration of video playback with HTML5

问题描述

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

I've got a simple HTML5 Video Player that is using TimeJump.js (http://davatron5000.github.io/TimeJump/) to allow for direct jumping to specific time codes.

IE跳到视频的第25分钟。

I.E. Jump to the 25th minute of the video.

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

I would like to add a limit on the duration of the video played. So, the user can only watch 60 seconds of video at a time. I cannot use the Media URL spec (i.e. #t=25,85) because the beginning of the video will change based on the URL string entered by the user (using TimeJump.js to jump to the point in the video)

关于如何限制所播放视频的持续时间的任何想法？

Any ideas on how to limit the duration of video played?

谢谢。

推荐答案

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

I never used TimeJump.js but you can listen to the timeupdate event of the media element (audio and video).

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设置视频播放的持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！