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
发表评论