uni-app video 多个视频循环播放全屏自动播放退出自动暂停功能

最新推荐文章于 2025-10-24 17:04:29 发布

原创最新推荐文章于 2025-10-24 17:04:29 发布 · 5.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #前端 #vue.js

这段代码展示了如何在移动端使用uni-app进行视频播放和全屏切换的处理。当退出全屏时，视频会暂停并重置播放状态。点击视频可以播放，并在已播放状态下请求全屏。使用了uni.createVideoContext进行视频操作。

<view class="video_item">
	<video  v-for="(item,index) in video_url"
	 :key="index"     
	 :id="'myVideo'+index"
	 :src="item.name"
     @fullscreenchange="fullscreenchange"
	@play="saveplay(index)"
	class="classvideo"
	@click="videoPlay(index)"
	:show-fullscreen-btn='false'
	object-fit="contain"
	></video>
				   </view>

fullscreenchange (e){
			if(!e.detail.fullScreen){ //退出全屏
				console.log("感受到了3")
	            uni.createVideoContext(`myVideo${this.videoindex}`).stop() //暂停播放
			    this.videoPlays = false
			    this.videoindex = -1
			}
			
        },
		videoPlay(index){
		 if(this.videoPlays==false){
			  this.videoindex = index
              uni.createVideoContext(`myVideo${index}`).requestFullScreen()
			  uni.createVideoContext(`myVideo${index}`).play()
			  this.videoPlays = true
		 }