javascript 使用 video-js 跳转到 HTML5 嵌入式视频中的时间戳
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6221344/
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
Jump to timestamp in HTML5 embedded Video with video-js
提问by Tyson
Greetings overflow,
问候溢出，
I'm trying to create buttons on a webpage that jump to tagged timestamps for an embedded video with video-js. Far as I can gather, I need to change the currentTime value in order to have the video move to the correct timestamp, however I can't get this to work even when setting currentTime in the initial javascript call.
我正在尝试在网页上创建按钮，这些按钮跳转到带有 video-js 的嵌入式视频的标记时间戳。据我所知，我需要更改 currentTime 值以使视频移动到正确的时间戳，但是即使在初始 javascript 调用中设置 currentTime 时，我也无法使其工作。
For example, if I wanted to start 200 seconds into the video:
例如，如果我想从视频开始 200 秒：
javascript:
javascript:
VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
HTML Snip:
HTML 片段：
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto" poster="./videoposter.png">
<source src="./videosource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Again, the video plays properly using the video-js player, just the currentTime offset doesn't seem to be applied and the video starts from the beginning. I've tested this in chrome, safari, IE and they all seem to do the same thing so I don't think the problem is browser specific. I must be doing something wrong...
同样，视频使用 video-js 播放器正确播放，似乎没有应用 currentTime 偏移量，视频从头开始。我已经在 chrome、safari、IE 中对此进行了测试，它们似乎都在做同样的事情，所以我认为问题不是特定于浏览器的。我一定做错了什么...
Thanks for your help!
谢谢你的帮助！
回答by David G
Remove the "VideoJS.setupAllWhenReady();" and it should work. This is what I have:
删除“VideoJS.setupAllWhenReady();” 它应该工作。这就是我所拥有的：
<!DOCTYPE html>
<html>
<head>
<title>Sample styled page</title>
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto">
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<script>
//VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function() {
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
</script>
</body>
</html>
回答by Suneth Kalhara
$(function(){
var myPlayer = _V_("my_video_1");
_V_("my_video_1").ready(function(){
myPlayer.src([
{ type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" },
{ type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" }
]);
});
});
$(window).load(function(){
var myPlayer = _V_("my_video_1");
myPlayer.currentTime(30);
myPlayer.play()
});
