H5页面内播放

<video v-if='isShowVideo' id="myvideo" ref='video' x5-playsinline="x5-playsinline"  x-webkit-airplay="allow" preload="auto" controlslist="nodownload" webkit-playsinline="true" controls="controls" playsinline="true" src="视频地址"></video>

微信H5全屏

<video id="myVideo" x5­-video­-player­-fullscreen='true' x5-video-player-type="h5"  src="视频地址" style="object-fit: fill;"></video>

x5-playsinline="x5-playsinline" x-webkit-airplay="allow" controlslist="nodownload" // 不要下载 webkit-playsinline="true" // iso 10 中让视频在小窗口播放,不是全屏播放 playsinline="true" // IOS微信浏览器支持小窗内播放

x5-video-player-fullscreen="true" // 全屏设置,设置为 true 是防止横屏 x5-video-player-type="h5" // 启用H5播放器,是wechat安卓版特性

在微信H5中,页面内视频播放会覆盖弹层,解决方案:在弹层出现时,先将video标签删除或隐藏,当弹层隐藏时,再将video标签显示或插入到页面中

controlslist的其他参数: nodownload // 禁止下载 nofullscreen // 禁止全屏 noremoteplayback // 禁止远程回访(测试未发现效果) 防止右键下载,可以增加oncontextmenu="return false";