Geek Answers Handbook

Html5 video information objects

Does anyone know if html5 video can connect to timeline objects like buttons, menus, etc.

Youtube flash player does this: at a certain point, show the object (banner, links, comments) on the video for certain seconds.

thank

+5
source share
4 answers

Yes and no, it is possible to create very interactive video presentations using html5 video objects, but this requires much more than just the video object itself. You can embed a video in a canvas object, and then ruin the actual frames of the video image, you can overlay any html visual element on top of the video object itself, and then animate it, you can control the video playback using buttons, clicks of events, etc. You can even if the video object controls the rest of the page with time-based listeners.

Popcorn.js is really really good and easy to learn, letting you do whatever you mention. http://popcornjs.org

http://popcornjs.org/demos

+4
source

HTML5, , progress. currentTime , , / .

, 1 2 :

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

X2TV ( www.x2.tv ) has a drag and drop studio where you can overlay icons and additional content within the HTML5 layer.

+1
source

If you like to use the more general https://github.com/nise/vi-two infrastructure , you might be interested.

0
source

More articles:


All Articles