88 lines
2.0 KiB
Plaintext
88 lines
2.0 KiB
Plaintext
<template>
|
||
<view class="video-page">
|
||
<!-- 原生视频组件：全端兼容 -->
|
||
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||
:autoplay="false" :loop="false" :muted="false" @play="onPlay" @pause="onPause"
|
||
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd"></video>
|
||
|
||
<!-- 自定义操作按钮 -->
|
||
<view class="btn-wrap">
|
||
<button type="primary" size="default" @click="openFullScreen">
|
||
手动横屏全屏播放
|
||
</button>
|
||
<button type="warn" size="default" @click="closeFullScreen">
|
||
退出全屏
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 测试视频地址，替换自己的
|
||
videoUrl: "https://www.w3school.com.cn/i/movie.mp4",
|
||
videoContext: null
|
||
};
|
||
},
|
||
onReady() {
|
||
// 初始化视频实例
|
||
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||
},
|
||
methods: {
|
||
// 进入横屏全屏
|
||
openFullScreen() {
|
||
// direction 90：横屏；-90反向横屏；0自适应
|
||
this.videoContext.requestFullScreen({
|
||
direction: 90
|
||
});
|
||
},
|
||
// 退出全屏
|
||
closeFullScreen() {
|
||
this.videoContext.exitFullScreen();
|
||
},
|
||
// 播放监听
|
||
onPlay() {
|
||
console.log("视频开始播放");
|
||
},
|
||
// 暂停监听
|
||
onPause() {
|
||
console.log("视频暂停");
|
||
},
|
||
// 全屏状态切换监听
|
||
handleFullScreenChange(e) {
|
||
if (e.detail.fullScreen) {
|
||
uni.setNavigationBarHidden(true); // 全屏隐藏顶部导航
|
||
} else {
|
||
uni.setNavigationBarHidden(false); // 退出恢复导航
|
||
}
|
||
console.log("当前全屏状态：", e.detail.fullScreen);
|
||
},
|
||
// 视频播放结束
|
||
onVideoEnd() {
|
||
// 播放完毕自动退出全屏
|
||
this.videoContext.exitFullScreen();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.video-page {
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.video-box {
|
||
width: 100%;
|
||
height: 420rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-wrap {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
</style> |