html5视频交互对象

有谁知道html5视频是否允许连接到时间轴的按钮，菜单等对象？html5视频交互对象

Youtube Flash播放器做到这一点：在特定时刻，在视频上显示一个对象（横幅，链接，评论）以定义秒。

感谢

2012-01-25 Mike

HTML5视频标签播放视频，但它也有很多功能，允许您在视频顶部添加一层交互性。 Popcorn.js可以做到这一点，H5P还有一个交互式视频库，您可以在视频时间线上添加额外的文本信息，图像和测验。 – Almonds

是的，没有，这是可能的使用HTML5视频对象但它来创建非常互动基于视频的演示需要的不仅仅是视频对象本身。您可以将视频嵌套到画布对象中，然后与实际的视频图像帧混合在一起，您可以在视频对象本身之上叠加任何可视html元素，然后为这些元素设置动画，使用按钮控制视频播放，单击事件等。甚至让视频对象用基于时间的侦听器控制页面的其余部分。

Popcorn.js真的很好，很容易学习，可以让你做所有你提到的。 http://popcornjs.org

http://popcornjs.org/demos

来源

2012-01-25 13:04:42 Alex

我猜画布内的视频是最完整的解决方案。 – Mike

是的，它是一个比dom更受控制的环境，它通常不那么耗费资源，因为浏览器呈现的dom元素略有不同，并且受到很多全局侦听器和事件的影响。尽管通过dom可以更容易地实现。 – Alex

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

来源

2012-01-25 10:49:46 bobince

此外，如果它只是静态文本WebVTT（以及其中的一个多边填充），则可以使用。 –

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

来源

2012-10-17 21:17:16

如果您愿意使用更通用的框架https://github.com/nise/vi-two可能会对您有所帮助。

来源

2015-10-19 08:27:32 user3072843

html5视频交互对象

回答

相关问题