微信浏览器-全屏视频问题

在安卓手机中，会打开一个原生视频播放控件，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>

 

转载于:https://www.cnblogs.com/zhouyouzhao/p/8064570.html