需要考虑以下两个平台：
- 移动端 H5
- web应用
H5 上的操作比较复杂，需要考虑微信环境，安卓环境以及 ios 环境，在不同的环境中的表现形式不同。
实现思路主要有如下几种：
- 自定义控制条
- 使用透明遮罩层遮盖进度条
- 播放器会被手机自带播放器拦截，所以跟你设置没设置controls 没有多大关系，爱奇艺、乐视等是让进度条滑动后恢复到原来播放位置，即拖到进度条后无效！
- 定时器
- 全屏时禁用控制条
定时器
定时器方式
// 禁止拖动进度条
const timer = setInterval(function() {
const currentTime = video.currentTime
// console.log(currentTime, originTime)
if (currentTime - originTime > 1) {
video.currentTime = originTime
}
originTime = currentTime
}, 500)
移动端视频播放特性
内联播放
内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。
webkit-playsinline 和 playsinline
在手机浏览器和QQ等App中播放H5视频，系统会自动接管进行全屏播放。显然，在很多场景中，我们需要在H5的页面中进行播放，则需要加上webkit-playsinline，在iOS10之后需要加上playsinline。所以，建议同时加上这两个属性。
<video id="video"
style="object-fit:fill"
preload="auto"
webkit-playsinline="true"
playsinline
></video>
腾讯x5内核
android的微信。它使用的是腾讯x5内核，不遵循X5web标准，会强制全屏。
<video id="video"
style="object-fit:fill"
preload="auto"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
></video>
x5-video-player-type="h5"启用 Ｈ5 同层播放器,也就内联播放。x5-video-player-fullscreen="true"视频播放时将会进入到全屏模式。x5-video-player-fullscreen="portraint"声明播放器支持的方向，此属性只在声明了x5-video-player-type="h5"情况下生效。可选值： landscape 横屏，portrain竖屏； 默认portrain，跟随手机旋转，"landscape|portrait"
iPhone 中全屏播放
使用 iPhone 自带浏览器播放视频时，分别有三种状态：
- 在文档流中播放
- 页内全屏播放
- 全屏播放
文档流中播放，如图：
页内全屏，如图
其中全屏播放时，由系统内的播放器接管。作用到播放器上的 CSS 代码将不起作用，通过css禁止用于触摸控制条这种方式将不起作用。
禁用全屏按钮
ios 端 微信内置浏览器 设置自动播放视频：
document.addEventListener('WeixinJSBridgeReady',function(){
video.play();
},false);