Question

有没有人知道html5视频是否允许连接到时间线的按钮，菜单等对象？

Youtube Flash播放器执行此操作：在特定时刻，在视频上显示对象（横幅，链接，评论）定义的秒数。

感谢

Answer 1

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

是和否，使用html5视频对象可以创建非常交互式的基于视频的演示文稿，但它需要的不仅仅是视频对象本身。您可以将视频嵌入到画布对象中然后混淆实际的视频图像帧，您可以在视频对象本身上叠加任何可视html元素，然后设置动画，您可以使用按钮控制视频播放，单击事件等。您可以甚至让视频对象使用基于时间的侦听器控制页面的其余部分。

Popcorn.js非常好，易于学习，可以让你完成你提到的所有内容。 http://popcornjs.org

http://popcornjs.org/demos

Answer 3

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

Answer 4

如果您想使用更通用的框架，https://github.com/nise/vi-two可能对您有用。

html5视频交互对象

4 个答案: