Vue 使用 video 标签实现视频播放

项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。

之前做视频播放时基本都是使用 vue-video-player 组件，其原因为 封装功能齐全、播放源兼容性好等。

通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。

具体使用方法如下

注：

使用 isShow 属性配合 css 样式动态展示视频滚动条使用 video 标签的 οncοntextmenu=“return false” 属性来实现禁止下载使用 video 标签的 @timeupdate=“timeupdate” 方法来实现视频播放进度监听使用 vue 的 ref 属性为 video 标签绑定监听事件，来实现其他功能，如时长统计、延迟提示、动态显示图标播放按钮等功能。