Html 将视频带到特定时间的 html5 视频按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15025378/
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
html5 video button that takes video to specific time
提问by Nathan
I'm trying to place a video that autoplays without controls but I want to add three custom buttons below the video, each button jumps the video to a specific time. Not using Youtube, Vimeo or any other hosted video. I've been able to link to a specific time, but that opens a new window and isn't cross browser compatible. Is this possible?
我正在尝试放置一个无需控件自动播放的视频，但我想在视频下方添加三个自定义按钮，每个按钮将视频跳转到特定时间。不使用 Youtube、Vimeo 或任何其他托管视频。我已经能够链接到特定时间，但这会打开一个新窗口并且与跨浏览器不兼容。这可能吗？
<video id="movie" style="border:none;" width="575" height="240" preload autoplay controls>
<source src="video.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" />
<source src="video.webm" type="video/webm; codecs=vp8,vorbis" />
</video>
<p class="navBtns">
<a href="video.ogv#t=9" target="_blank"><img src="dot.png" /></a>
<a href="video.ogv#t=17" target="_blank"><img src="dot.png" /></a>
<a href="video.ogv#t=29" target="_blank"><img src="dot.png" /></a>
</p>
<script>
var v = document.getElementsByTagName('video')[0];
v.removeAttribute('controls') // '' in Chrome, "true" in FF9 (string)
v.controls // true
</script>
回答by codecandies
Your links feature two different problems:
您的链接有两个不同的问题：
- they have the target="_blank" attribute, therefor they open a new window/tab. (get rid of those)
- you're linking to the video itself, not to the page with the video embedded. This just won't work as expected.
- 它们具有 target="_blank" 属性，因此它们会打开一个新窗口/选项卡。（摆脱那些）
- 您要链接到视频本身，而不是链接到嵌入视频的页面。这不会按预期工作。
To control a video on a page directly without leaving the page, you'll need some javascript. Here you'll find an example how this will work.
要在不离开页面的情况下直接控制页面上的视频，您需要一些 javascript。在这里，您将找到一个如何工作的示例。
JS Fiddle: Video CurrentTime Example
You'll need a function to jump to the specific time on click of one of your links, that would be (for instance):
您需要一个功能来跳转到点击您的链接之一的特定时间，这将是（例如）：
var firstlink = document.getElementByTagName('a')[0];
firstlink.addEventListener("click", function (event) {
event.preventDefault();
myvideo.currentTime = 7;
myvideo.play();
}, false);
回答by Barney
You can set the currentTimeattribute of a video. Using your example:
您可以设置currentTime视频的属性。使用您的示例：
var vidLinks = document.querySelectorAll('.navBtns a');
for(var i = 0, l = vidLinks.length; ++i){
makeVideoLink(vidLinks[i]);
}
function jumpToTime(time){
v.currentTime = time;
}
function makeVideoLink(element){
// Extract the `t=` hash from the link
var timestamp = element.hash.match(/\d+$/,'')[0] * 1000;
element.addEventListener('click', function videoLinkClick(e){
jumpToTime(timestamp);
return false;
},false)
}
Mozilla's Developer Network site has a great list of HTML5 media element properties.
Mozilla 的开发者网络站点有一个很好的 HTML5 媒体元素属性列表。
