<template>
<view>
<view class="page-body">
<view class="page-section">
<video id="myVideo" src="src" @error="videoErrorCallback" object-fit="cover" ref="myvideo"></video>
<view class="" style="padding-top: 50rpx;">
<button type="default" @click="bofang()">播放</button>
</view>
<view class="" style="padding-top: 50rpx;">
<button type="default" @click="tingzhi()">停止</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'video',
src: '/static/01.mp4',
}
},
onShow() {
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
bofang(){
console.log('播放');
this.videoContext.play();
},
tingzhi(){
console.log('停止');
this.videoContext.stop();
},
videoErrorCallback: function (e) {
console.log('视频错误信息:')
console.log(e.target.errMsg)
},
}
}
</script>
<style>
.page-section{
width: 100%;
height:500rpx;
}
.page-section video{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
JS控制视频播放或暂停
最新推荐文章于 2024-04-26 16:47:03 发布