前端 互动视频 vue 播放器

前端互动视频 vue制作
最近鼓捣了一下互动视频,记录一下前端的做法和思路
难点:1.播放器
2 数据结构
1.首先说下播放器，做互动视频，最主要的是遮罩，遮罩不仅能覆盖原视频，而且上面可以显示能实际点击的按钮或div，原生的video组件在全屏时是没有层级的，所以一般的利用div层级覆盖是行不通的 所以这里有两个解决办法，一是用canvas画布创建播放器，二是利用一些h5播放器来做二次开发 例如video.js和muiplayer等，本文选用的muiplayer
按照文档，遮罩可以使用右侧组件来魔改

main.js引入

初始化后注册右侧组件
此时播放器和右侧遮罩创建完毕。需要在视频后显示遮罩，muiplay文档没有提供结束事件的监听，但是提供了获取原生video的方法，可以利用video原生事件去监听视频结束事件