html5视频按钮，需要视频到特定时间

我想放置一个视频，自动播放没有控制，但我想在视频下面添加三个自定义按钮，每个按钮跳转到特定时间的视频。不使用Youtube，Vimeo或任何其他托管视频。我已经能够链接到特定的时间，但是这会打开一个新窗口并且不能跨浏览器兼容。这可能吗？html5视频按钮，需要视频到特定时间

<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>

来源

2013-02-22 Nathan

你的脚本在哪里？ – KyelJmD 2013-02-22 13:30:56

一切都是可能的，但没有你的脚本，我们不能帮你。 – Tbi45 2013-02-22 13:33:59

谢谢，我添加了我必须输入的脚本。 – Nathan 2013-02-22 14:02:11

您的链接设有两个不同的问题：

他们有目标=“_空白”属性，为此他们打开一个新窗口/标签。（摆脱那些）
你链接到视频本身，而不是嵌入视频的页面。这只是不会按预期工作。

要直接控制页面上的视频而不离开页面，您需要一些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);

来源

2013-02-22 14:16:06 codecandies

这让我走向了正确的方向，正是我所期待的。谢谢！ – Nathan 2013-02-22 14:38:28

您可以设置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。

来源

2013-02-22 14:16:21 Barney

html5视频按钮，需要视频到特定时间

回答

相关问题