html5视频交互对象

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

Youtube flash player可以做到这一点：在特定的时刻，在视频上显示一个对象（横幅、链接、评论），持续几秒钟

---

感谢它不是HTML5视频标准的一部分，但是通过将一些脚本连接到

进度

事件，可以很容易地手动实现。通过查看视频对象的

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>

。。。
你好
var overlay=document.getElementById（'overlay'）；
var video=document.getElementById（'v'）；
video.addEventListener（'progress'，function（）{
var show=video.currentTime>=1&&video.currentTime是和否，
使用html5视频对象可以创建非常交互式的基于视频的演示文稿，但是它需要的不仅仅是视频对象本身。您可以将视频嵌套到画布对象中，然后与实际的视频图像帧混淆，您可以在视频对象上覆盖任何可视html元素，然后设置动画，您可以使用按钮、单击事件等控制视频播放。您甚至可以使用基于时间的侦听器让视频对象控制页面的其余部分

Popcorn.js非常好学，可以让你完成你提到的所有事情。

X2TV（）有一个拖放工作室，您可以在其中覆盖HTML5层中的图标和其他内容。
如果您想使用更通用的框架，您可能会感兴趣。
此外，如果它只是静态文本WebVTT（以及其中的一个多填充）可以使用。我猜canvas内的视频是最完整的解决方案。是的，它是一个比dom更受控制的环境，而且它通常资源较少，因为浏览器呈现的dom元素略有不同，并且受许多全局侦听器和事件的影响。但是，通过dom进行此操作将更容易访问HTML5视频标签播放视频，但它也有许多功能，允许您在视频上添加一层交互。Popcorn.js可以做到这一点，H5P还有一个交互式视频库，您可以在其中向视频时间线添加额外的文本信息、图像和测验。