html5 video button that takes video to specific time

Question

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>

Answer 1

You can set the currentTime attribute of a video. Using your example:

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.

Answer 2

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