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

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

 

posted @ 2017-12-19 11:17  周周写  阅读(645)  评论(0编辑  收藏  举报