微信小程序视频自动全屏

最新推荐文章于 2024-08-07 16:40:50 发布

if时光重来

最新推荐文章于 2024-08-07 16:40:50 发布

阅读量3.8k

点赞数 2

分类专栏：小程序文章标签：小程序

原文链接：https://blog.csdn.net/zhouyuyy/article/details/106855653

版权

小程序专栏收录该内容

26 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在微信小程序中实现视频自动全屏播放，并在视频结束后自动退出全屏。通过`onShow`函数设置视频全屏，使用`requestFullScreen`方法并指定屏幕方向。同时，定义了`bindended`事件处理函数`endAction`来监听视频结束，调用`exitFullScreen`退出全屏状态。这为微信小程序中的视频播放提供了流畅的用户体验。

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

<video id="myVideo" src="cloud://test-qu7lc.7465-test-qu7lc-1302432879/video/l3100gw1zos.mp4" autoplay='{{true}}' show-progress='{{false}}' controls='{{true}}'
bindended='endAction'></video>

// 自动全屏
	onShow: function () {
		this.videoContext = wx.createVideoContext('myVideo', this);// 	创建 video 上下文 VideoContext 对象。
		this.videoContext.requestFullScreen({	// 设置全屏时视频的方向，不指定则根据宽高比自动判断。
			direction: 90						// 屏幕逆时针90度
		});
	},
// 视频结束后自动退出全屏
	endAction: function () {
		this.videoContext = wx.createVideoContext('myVideo', this);
		this.videoContext.exitFullScreen(); //退出全屏
},`