<template>
<view>
<video :src="url" :poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'">
<cover-view class="cover">video组件</cover-view>
</video>
<video
id="myVideo"
:src="url"
:show-center-play-btn="false"
:controls="false"
:enable-progress-gesture="false"
:show-fullscreen-btn="false"
:show-progress="false"
:show-loading="false"
codec="hardware"
:play-strategy="1"
:poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'"
style="margin-top: 40rpx;"
>
<cover-image class="logo" @click="clickBtn(5)" src="../../static/logo.png"></cover-image>
<cover-view class="cover"></cover-view>
</video>
<view class="btns">
<button class="btn" @click="clickBtn(1)" type="primary">播放</button>
<button class="btn" @click="clickBtn(2)" type="primary">暂停</button>
<button class="btn" @click="clickBtn(3)" type="primary">全屏(竖屏)</button>
<button class="btn" @click="clickBtn(4)" type="primary">全屏(横屏)</button>
<button class="btn" @click="clickBtn(5)" type="primary">退出全屏</button>
<button class="btn" @click="clickBtn(6)" type="default">video</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
videoContext: ''
};
},
onHide() {
let id = `myVideo`;
this.videoContext = uni.createVideoContext(id, this);
this.videoContext.pause();
console.log('onHide');
},
methods: {
clickBtn(i) {
let id = `myVideo`;
switch (i) {
case 1:
try {
this.videoContext = uni.createVideoContext(id, this);
this.videoContext.play();
} catch (err) {
console.log(err);
}
break;
case 2:
this.videoContext = uni.createVideoContext(id, this);
this.videoContext.pause();
break;
case 3:
this.videoContext = uni.createVideoContext(id, this);
// this.videoContext.requestFullScreen({ direction: -90 });
this.videoContext.requestFullScreen({ direction: 0 });
break;
case 4:
this.videoContext = uni.createVideoContext(id, this);
this.videoContext.requestFullScreen({ direction: -90 });
// this.videoContext.requestFullScreen({ direction: 0 });
break;
case 5:
this.videoContext = uni.createVideoContext(id, this);
this.videoContext.exitFullScreen();
break;
case 6:
uni.navigateTo({
url: '../video/video'
});
break;
}
}
}
};
</script>
<style scoped>
.cover {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
background: orangered;
}
.logo {
width: 40rpx;
height: 40rpx;
margin: 80rpx;
}
.btns {
width: 375px;
margin-top: 20rpx;
}
.btn {
width: 686rpx;
margin: 20rpx 32rpx;
}
</style>
3***@qq.com
- 发布：2022-08-24 13:47
- 更新：2023-11-04 09:01
- 阅读：2436
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10专业版
HBuilderX类型： 正式
HBuilderX版本号： 3.5.3
手机系统： Android
手机系统版本号： Android 11
手机厂商： OPPO
手机机型： OPPO A9
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击video的播放图标视频播放切换tabbar页面，在onHide里面使用uni.createVideoContext(videoId, this)和pause()无效，视频无法暂停播放
点击video的播放图标视频播放切换tabbar页面，在onHide里面使用uni.createVideoContext(videoId, this)和pause()无效，视频无法暂停播放
预期结果：
视频可以暂停播放
视频可以暂停播放
实际结果：
视频无法暂停播放
视频无法暂停播放
bug描述：
切换tabbar页面时使用使用uni.createVideoContext(videoId, this)和pause()方法无效，视频无法暂停播放
这并不是一个 bug，各端展示效果会有所区别，正如你所说的，在 onHide 中去手动暂停是可以实现这种操作的，如果是微信小程序还可以使用 auto-pause-if-navigate 属性达到这种效果
3***@qq.com (作者)
切换到tabbar页面，使用uni.createVideoContext(videoId, this)和pause()无法暂停视频播放
vue2.0则可以暂停视频播放
3***@qq.com (作者)
切换tabbar无法暂停
2022-08-24 14:36
3***@qq.com (作者)
只有使用uni,navigateTo()跳转页面才可以手动暂停
2022-08-24 14:38
3***@qq.com (作者)
切换tabbar页面无法暂停
2022-08-24 14:38