我正在尝试放置一个没有控件的自动播放视频,但我想在视频下方添加三个自定义按钮,每个按钮都会将视频跳转到特定时间。不使用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>
答案 0 :(得分:14)
您的链接有两个不同的问题:
要在不离开页面的情况下直接控制页面上的视频,您需要一些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);
答案 1 :(得分:3)
您可以设置视频的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。