小程序点击播放/暂停视频_微信小程序中的视频如何自主控制播放暂停-CSDN博客

本文链接：https://blog.csdn.net/qq_40255459/article/details/136946403

本文介绍了如何在微信小程序中使用WXML、WXSS和JS代码来控制视频的播放和暂停，包括设置controls属性、autoplay、loop以及使用wx.createVideoContext进行操作。

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

小程序点击播放/暂停视频

wxml代码

<!--controls==是否显示进度条-->
<!--autoplay==是否自动播放-->
<!--loop==是否循环播放-->
<!--muted==是否静音播放-->
<view class="video" style="height: 100vh;background: #000;">
	<image src="./static/images/icon_bofang.png" wx:if="{{isPhotoShow}}" mode="widthFix" class="bofang"/>
	<video class="video-view" id="myVideo" src="{{video_url}}" controls="{{false}}" autoplay="{{true}}" loop="{{true}}" enable-progress-gesture="{{false}}" muted="{{false}}" bindtap="videoFun">
	</video>
</view>

wxss代码

.video{
display: flex;
	align-items: center;
	justify-content: center;
	}
.video-view{
	width: 100%;
	height: calc(100% - 0px);
}
.bofang{
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	z-index: 9999;
}

js代码

data:{
video_url: '',//视频路径
		isPhotoShow: false,//是否显示暂停按钮
},
//点击控制视频播放与暂停
videoFun: function () {
		var that = this;
		if (that.data.isPhotoShow) {
			that.videoPlay();
		} else {
			that.videoPause()
		}
	},
	// 视频播放
	videoPlay() {
		const that = this;
		let videoplay = wx.createVideoContext('myVideo', this);//   创建 video 上下文 VideoContext 对象。
		videoplay.play();
		that.setData({
			isPhotoShow: false
		})
		console.log('播放了')
	},
	// 视频暂停
	videoPause() {
		const that = this;
		let videoplay = wx.createVideoContext('myVideo', this);//   创建 video 上下文 VideoContext 对象。
		videoplay.pause();
		that.setData({
			isPhotoShow: true
		})
		console.log('暂停了')
	},