微信浏览器-全屏视频问题
在安卓手机中,会打开一个原生视频播放控件,position属性同样适用于该控件,播放视频结束时,会出现闪烁以及黑屏。严重影响用户体验。
全屏视频设置:
<video ref="viewer" preload src="xxx/video.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>
去除结束黑屏方法:
在需要的页面使用一个空的canvas,使video在结束时,达到背景透明效果,在video背景中映射底部的页面,消除video结束黑屏问题
<!-- 插入空canvas --> <canvas></canvas> <!-- 插入空canvas --> <video ref="viewer" preload src="xxx/video.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>