解決uniapp視頻video組件進入全屏再退出全屏后,cover-view失效的問題


解釋:uniapp的video組件在非H5端是覆蓋在所有層級之上的,要想在video組件層級之上添加自定義盒子,則需要用cover-view。如圖紅框內為自定義內容
video組件詳細解釋見文檔: https://uniapp.dcloud.io/component/video?id=video
注:App端vue頁面 cover-view、cover-image 中不支持嵌套其它組件,包括再次嵌套cover-view。只能有一個層級即<cover-view>文字</cover-view>
cover-view詳細解釋見文檔: https://uniapp.dcloud.io/component/cover-view?id=cover-view

問題所在:初始化Video和cover-view盒子時,cover-view是覆蓋在video組件之上的。但在video全屏后,再退出全屏時,cover-view的盒子會被video組件覆蓋。

解決方法

給cover-view一個變量如isshow,通過v-if(不要用v-show)來控制顯示隱藏。監聽video全屏事件,全屏時,設置變量為false,退出全屏時再設為true,這樣每次退出全屏,cover-view會重新加載。被覆蓋的問題就解決了。

<video
	class="video-player"
	id="videoPlayer"
	:src="videoUrl" 
	:poster="videoInfo.vimage"
	:autoplay="isAutoplay"
	object-fit="fill"
	@play="videoPlayStart"
	@pause="videoPlayPause"
	@fullscreenchange="playerFullScreen"
	@error="videoPlayError"
>
						
	<cover-view class="video-definition-btn" @tap="showDefinitionOption" v-if="isDefinitionBtnShow">高清</cover-view>
</video>


playerFullScreen(e){
	if(e.detail.fullScreen){  //全屏
		this.isDefinitionBtnShow=false			
	}else{  //非全屏			
		this.isDefinitionBtnShow=true
	}
},


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM