HTML5视频按钮，带视频的具体时间 [英] html5 video button that takes video to specific time

问题描述

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

 ＆lt;视频ID =电影的风格=边界：无; WIDTH =575HEIGHT =240preLOAD自动播放控制＆GT;
＆lt;信源SRC =video.ogvTYPE =视频/ OGG codeCS =的Theora，Vorbis格式/＆GT;
＆lt;信源SRC =video.mp4TYPE =视频/ MP4; codeCS = avc1.42E01E，mp4a.40.2/＆GT;
＆lt;信源SRC =video.webmTYPE =视频/ W​​EBM codeCS = VP8，Vorbis格式/＆GT;
＆LT; /视频＆GT;＆LT; p =类navBtns＆GT;
＆LT; A HREF =＃video.ogv T = 9的目标=_空白＆GT;＆LT; IMG SRC =dot.png/＆GT;＆LT; / A＆GT;
＆LT; A HREF =＃video.ogv T = 17的目标=_空白＆GT;＆LT; IMG SRC =dot.png/＆GT;＆LT; / A＆GT;
＆LT; A HREF =＃video.ogv T = 29的目标=_空白＆GT;＆LT; IMG SRC =dot.png/＆GT;＆LT; / A＆GT;
＆所述; / P＆GT;＆LT;脚本＆GT;
变种V = document.getElementsByTagName（'视频'）[0];
v.removeAttribute（'控制'）//''在Chrome，在FF9真（串）
v.controls //真
＆LT; / SCRIPT＆GT;
 

解决方案

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

1. 他们有目标=_空白属性，为此他们打开一个新窗口/标签。 （摆脱那些）


2. 您要链接到视频本身，而不是与嵌入视频的网页。这只是不会如预期。工作

要控制页面上的视频的情况下直接离开页面，你需要一些JavaScript。在这里，你会发现一个例子这将如何工作。

JS小提琴：视频CURRENTTIME例

您将需要一个函数跳转到你的链接之一的点击的具体时间，这将是（例如）：

  VAR首联= document.getElementByTagName（'A'）[0];
firstlink.addEventListener（点击，函数（事件）{
    。事件preventDefault（）;
    myvideo.currentTime = 7;
    myvideo.play（）;
}，FALSE）;
 

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?

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

解决方案

Your links feature two different problems:

1. they have the target="_blank" attribute, therefor they open a new window/tab. (get rid of those)
2. you're linking to the video itself, not to the page with the video embedded. This just won't work as expected.

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.

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

这篇关于HTML5视频按钮，带视频的具体时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！