将视频带到特定时间的html5视频按钮答案

【问题标题】：html5 video button that takes video to specific time将视频带到特定时间的html5视频按钮
【发布时间】：2013-02-08 03:23:56
【问题描述】：

我正在尝试放置一个无需控件即可自动播放的视频，但我想在视频下方添加三个自定义按钮，每个按钮都会将视频跳转到特定时间。不使用 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>

【问题讨论】：

你的脚本在哪里？
一切皆有可能，但没有您的脚本，我们无能为力。
谢谢，我已将我拥有的脚本添加到条目中。

标签： javascript html button video hyperlink

【解决方案1】：

您的链接存在两个不同的问题：

它们具有 target="_blank" 属性，因此它们会打开一个新窗口/选项卡。（摆脱那些）
您链接的是视频本身，而不是嵌入视频的页面。这将无法按预期工作。

要在不离开页面的情况下直接控制页面上的视频，您需要一些 javascript。在这里，您将找到一个如何工作的示例。

JS Fiddle: Video CurrentTime Example

你需要一个函数来跳转到点击你的一个链接的特定时间，这将是（例如）：

var firstlink = document.getElementByTagName('a')[0];
firstlink.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.currentTime = 7;
    myvideo.play();
}, false);

【讨论】：

这让我找到了正确的方向，正是我想要的。谢谢！
您能解释一下myvideo 是什么——它只是对HTML 5 <video> 元素的引用吗？另外，currentTime——毫秒的单位是什么？秒？分钟？（我知道我们可以查看所有这些信息，但是好的、完整的 StackExchange 答案包括此类信息。）

【解决方案2】：

您可以设置视频的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 的开发者网络站点有a great list of HTML5 media element properties。

【讨论】：