uniapp微信小程序视频全屏播放退出全屏暂停播放

最新推荐文章于 2024-07-06 20:36:19 发布

某公司摸鱼前端

最新推荐文章于 2024-07-06 20:36:19 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 微信小程序 uni-app 文章标签： uni-app 微信小程序音视频

本文链接：https://blog.csdn.net/weixin_59685936/article/details/131676806

版权

javascript 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

微信小程序

8 篇文章 0 订阅

订阅专栏

uni-app

6 篇文章 0 订阅

订阅专栏

该代码示例展示了在微信小程序中如何处理视频播放时进入全屏以及在退出全屏时暂停或停止视频播放的功能。`play()`方法用于请求全屏，而`fullscreenchange`事件监听退出全屏，此时根据事件详情判断是否暂停或停止视频。需要注意的是，这些功能在微信小程序模拟器上可能无法正常工作，必须在真机上进行调试。

摘要由CSDN通过智能技术生成

<video 
	:src="url" 
	controls 
	id="video" 
	@play="play"
	@fullscreenchange="fullscreenchange">
</video>

// 播放时进入全屏
play() {
	let videoContext = uni.createVideoContext('video', this)
	videoContext.requestFullScreen()
},
 
//退出全屏时暂停
fullscreenchange(e) {
	if (!e.detail.fullScreen) {
		uni.createVideoContext('video', this).pause();
	} 
},
//退出全屏时停止
fullscreenchange (e){
	if(!e.detail.fullScreen){
		this.videoContext.stop()
	}
}

注意：微信小程序模拟器下调试无效，必须真机调试有用！！！！