<template>
<view class="">
<video class="video"
id="video"
:src="src"
:loop="false"
:controls="true"
objectFit="contain"
:http-cache="true"
:autoplay='false'
:enable-progress-gesture='false'
:show-center-play-btn="false"
:show-play-btn="false"
:show-fullscreen-btn="false"
:show-progress="false"
@progress='progress'
></video>
<text class="" style="font-size: 30rpx;color: #f00;padding: 30rpx;text-align: center;padding-top: 100rpx;">请先播放视频，再跳转页面</text>
<view class="btn" @tap='play'><text style="color: #fff;">播放视频</text></view>
<view class="btn" @tap='pause'><text style="color: #fff;">暂停视频</text></view>
<view class="btn" @tap='a' style="background-color: #f00;margin-top: 100rpx;"><text style="color: #fff;font-size: 40rpx;">跳转页面</text></view>
</view> </template>
<script>
export default {
data() {
return {
src:'http://qiniu.v.xtiao123.com/qiniu___e5d465ac09e49d8fd13e0397ef9885c2'
}
},
onReady() {
// this.play()
},
onLoad() {
},
methods: {
a(){
this.pause(); // 暂停视频
uni.switchTab ({
url:'/pages/index/a'
})
},
play(){
this.getVideoContext()?.play();
},
pause(){
this.getVideoContext()?.pause();
},
// 创建并返回 video 上下文 videoContext 对象
getVideoContext() {
return uni.createVideoContext('video');
},
// 视频播放进度条
progress(e:UniVideoProgressEvent){
console.log(e.detail.buffered)
},
}
} </script>
<style>
.video{
width: 100%;
}
.btn{
background-color: #000;
color: #fff;
font-size: 50rpx;
padding: 30rpx;
text-align: center;
align-items:center;
justify-content: center;
margin: 50rpx;
margin-top: 0;
} </style>
0 个回复