html5 video interactive objects

Question

Does anyone know if html5 video allows objects like buttons, menu, etc connected to the timeline?

Youtube flash player do this: in specific moment, show an object (banner, links, comments) over the video for defined seconds.

thanks

Answer 1

Yes and no, It's possible to create very interactive video-based presentations using html5 video objects however it requires a lot more than just the video object itself. You can nest video into a canvas object then mess with the actual video image frames, you can overlay any visual html element on top of the video object itself then animate these, you can control the video playback with buttons, click events etc. You can even have the video object control the rest of the page with time-based listeners.

Popcorn.js is really really good and easy to learn, allowing you to do all of what you mentioned. http://popcornjs.org

http://popcornjs.org/demos

Answer 2

It's not part of the HTML5 video standard, but it's easy to implement manually by wiring up some scripting to the progress event. By looking at the currentTime property of the video object you can decide when to show/hide additional elements.

eg showing an element on top of a video between 1 and 2 seconds into a video:

<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>

<script type="text/javascript">
    var overlay= document.getElementById('overlay');
    var video= document.getElementById('v');
    video.addEventListener('progress', function() {
        var show= video.currentTime>=1 && video.currentTime<2;
        overlay.style.visibility= show? 'visible' : 'hidden';
    }, false);
</script>