html5视频交互对象

Question

有人知道html5视频是否允许像按钮、菜单等对象连接到时间轴上吗？

Youtube flash播放器做到这一点:在特定的时刻，在视频上显示一个对象(横幅，链接，评论)的时间为定义的秒数。

谢谢

Answer 1

是也不是，使用html5视频对象创建非常交互式的基于视频的演示是可能的，但是它需要的不仅仅是视频对象本身。您可以将视频嵌套到画布对象中，然后处理实际的视频图像帧，您可以将任何视觉html元素覆盖在视频对象本身之上，然后对这些元素进行动画处理，您可以使用按钮、单击事件等来控制视频回放。您甚至可以使用基于时间的侦听器来控制页面的其余部分。

Popcorn.js真的很好，而且很容易学习，它允许你做你提到的所有事情。http://popcornjs.org

http://popcornjs.org/demos

Answer 2

它不是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>

Answer 3

X2TV (www.x2.tv)有一个拖放工作室，您可以在其中覆盖HTML5图层中的图标和其他内容。