Video在移动端播放的处理

属性概述

1、playsinline 设置内嵌播放，移动端还需加webkit-playsinline属性

2、controls属性，进度条控制，不加该属性，苹果端会禁掉进度条，安卓端不行，暂无法解决，只有安卓微信可以特殊处理，加属性x5-video-player-type="h5"

3、object-fill样式，实现全屏播放

使用

1、内嵌播放不全屏，安卓无法去掉进度条，安卓微信去掉进度条的话，需加x5-playsinline="true"  x5-video-player-type="h5"，但此时安卓端会调系统播放器，无法内嵌播放。适合视频在页面某部分播放的情况

<video  src="./assets/translator.mp4" id="video" preload='auto' preload webkit-playsinline="true" poster="./assets/poster.png"
       playsinline="true" type="video/mp4" ></video>

注意：华为手机有问题，能看到底下的背景图，除非我们的video与华为播放浮层的视频大小一致，因此内嵌播放最好不要加x5-playsinline="true"，让安卓端带进度条

2、内嵌全屏播放(即视频充满整个页面)，去掉进度条，适合视频在页面全屏播放的情况

标签同1，需加x5-playsinline="true"  x5-video-player-type="h5"，video样式需加宽高100%，并且加object-fill：fill，否则会出现黑白边

3、直接调手机播放器全屏播放

<video controls src="./assets/translator.mp4" id="video" preload='auto' preload poster="./assets/poster.png"   type="video/mp4"></video>

总的来说，以上方案安卓进度条问题尚无法解决，想真正内嵌，必须带进度条，不能加x5-video-player-type="h5"(微信有效)，否则会调系统播放器，本身全屏的视频可以考虑去进度条。另外小众浏览器也会有不同的问题，需要根据页面投放渠道进行特殊处理，比如qq浏览器，uc浏览器内嵌带进度条，但智行app则内嵌不带进度条