uniapp视频播放暂停按钮

文章描述:

uniapp如何制作单独的播放和暂停按钮

template

<template>
	<view class="container">
		<video  id="myVideo" :src="url"></video>
		
		<button @tap="play">播放</button>
		<button @tap="pause">暂停</button>
	</view>
</template>

script

export default{
	data(){
		return{
			url:"https://www.miyil.com/statics/videos/huoyingrenzhe_changmen_sl.mp4"
		}
	},
	methods:{
		play(){
			this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
			this.videoContext.play();  //播放
		},
		pause(){
			this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
			this.videoContext.pause(); //暂停	
		}
	}
}

style

.container{
	padding: 30upx 40upx;
}
video{ width: 100%; margin-bottom: 20upx; }
button{ margin-bottom: 20upx; }

 

发布时间:2022/05/13

发表评论