Javascript 在 HTML5 视频中控制播放的开始位置和持续时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11212715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Control start position and duration of play in HTML5 video
提问by Cole Hudson
We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?
我们有一个视频（13 分钟长），我们想使用 HTML5 来控制它。我们希望能够让我们的用户控制和选择他们想要播放的视频部分。最好是通过 2 个输入字段进行此控制。他们将在第一个框中输入开始时间（以秒为单位），并在第二个框中输入播放持续时间（以秒为单位）。例如，他们可能希望在 10 秒后开始播放视频并播放 15 秒。关于执行此操作所需的 Javascript 的任何建议或指导？
Note:I have found the following:
注意：我发现了以下内容：
But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.
但它仅解决在特定时间开始的问题，而与在指定的时间长度内播放视频无关。
回答by Paul Sham
You could use the timeupdate event listener.
您可以使用 timeupdate 事件侦听器。
Save the start time and duration time to variable after loadedmetadataevent.
loadedmetadata事件发生后将开始时间和持续时间保存到变量中。
// Set video element to variable
var video = document.getElementById('player1');
var videoStartTime = 0;
var durationTime = 0;
video.addEventListener('loadedmetadata', function() {
videoStartTime = 2;
durationTime = 4;
this.currentTime = videoStartTime;
}, false);
If current time is greater than start time plus duration, pauses the video.
如果当前时间大于开始时间加上持续时间，则暂停视频。
video.addEventListener('timeupdate', function() {
if(this.currentTime > videoStartTime + durationTime){
this.pause();
}
});
回答by Arvin
If you are able to set start time and end time of video while setting the video url. you can specify the start and end time in the url itself like
如果您可以在设置视频网址时设置视频的开始时间和结束时间。您可以在 url 本身中指定开始和结束时间，例如
src="future technology_n.mp4#t=20,50"
it will play from 20th second to 50th second.
它将从第 20 秒播放到第 50 秒。
回答by Jim S.
There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,endwhere startis the start time in seconds and endis the end time in seconds.
使用 Paul Sham 提出的 javascript 解决方案有很多细微差别。一个更简单的操作过程是使用Media Fragment URI Spec。它将允许您指定要播放的较大音频或视频文件的一小部分。要使用它只是改变了你的流媒体文件，并添加源#t=start,end，其中start以秒为单位的开始时间，并end以秒为单位的结束时间。
For example:
例如：
var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;
document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;
This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.
这将更新播放器以在指定时间开始源视频并在指定时间结束。浏览器对媒体片段的支持也非常好，因此它应该可以在任何支持 HTML5 的浏览器中使用。
回答by Alekscs
Extend to michael hanon comments: IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:
扩展到 michael hanon 评论：IE 返回 buffered.length = 0 和 seekable.length = 0。视频不播放。所以解决方案：
src="video.mp4#t=10,30"
src="video.mp4#t=10,30"
will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.
不会在 IE 中工作。如果您想支持 IE，唯一的方法是使用 javascript 从 0 秒开始后立即搜索视频。
