视频中的鼠标交互是怎么做的？

Question

这些年网页视频播放中添加了些动态的广告，如下图：鼠标在视频播放过程中，滑动到某些部位的时候会动态显示出相应的广告信息。

想知道这样的交互式的视频是如何做的？难道是像歌词一样，后期人工一秒一秒加上去的？

Answer 1

想想也不可能是人工一秒一秒加上去的啊……

都是通过事件处理的，后台先定义好广告出现的位置（可能是某个区间内随机的一个位置），前台取到数据后在相应的事件里显示就好了，并没有什么高深的东西

Answer 2

我觉得这个可能不是随机一个位置那么简单的。因为有时候是，只当我鼠标在人物的衣服上的时候，才会出现衣服提供商相应的广告链接，所以我认为这里肯定是更复杂的实现方式。
后来我看了一下，上面的截图视频使用flash播放的，所以觉得这里用的技术可能和flash相关。但是如果要我自己去用html5实现这样的效果的话，我能想到的实现方式是：

1. 首先这个互动的东西应该是和字幕一样，属于后期编辑上去的。动态广告链接和字幕一样，是随着视频的播放时间相关而变化

2. 编辑后的输出，应该是一段额外的信息去描述某个时间点在视频的哪些区域的什么事件（例如：鼠标移动，鼠标点击）应该有什么样的响应。（这里和弹幕有点像，每条弹幕信息都肯定绑定了视频的某个时间点作为弹幕的触发时间；不同的是弹幕除了时间之外，只需要描述文字颜色内容速度之类的信息，而这里的可能需要一个描述二维平面的信息）

3. 那么html5中什么可以用来描述任意二维的区域并且绑定事件呢？我能想到的是canvas，很多h5游戏引擎中canvas都有hittest

4. 所以结果就是：

   1） 视频层需覆盖一层canvas
   2） 在加载视频时会同时加载后期编辑的动态广告链接信息：即什么时候在视频什么区域，触发什么事件出现什么链接
   3） 前端提供一套方法去解读这个后期编辑的信息，在视频播放的同时去不停更新canvas，来完成不同画面点击不同区域有不同的广告链接
   
   

   以上只是自己的实现思路，如果有谁做过类似这一块的，还望分享更好的方式。

Answer 3

广告是浮在视频上面的，没那么高深。

Answer 4

后台会有一个接口，一般来说接口里面有时间节点，位置信息等