106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<template>
|
||
<view class="video-page">
|
||
<!-- 原生视频组件：全端兼容 -->
|
||
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||
:autoplay="true" :loop="false" :muted="false" @play="onPlay" @pause="onPause" object-fit="cover" :direction="90"
|
||
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd" @fullscreenclick="tapback"></video>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
videoUrl: "",
|
||
videoContext: null
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log(options, '页面参数');
|
||
// 接收视频地址
|
||
if (options.url) {
|
||
this.videoUrl = options.url;
|
||
}
|
||
},
|
||
onReady() {
|
||
// #ifdef APP-PLUS
|
||
//plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
|
||
|
||
// #endif
|
||
// 初始化视频实例（唯一正确位置）
|
||
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||
// 页面渲染完成后 安全触发自动全屏
|
||
//this.autoFullScreen();
|
||
},
|
||
methods: {
|
||
tapback(e) {
|
||
console.log('点击全屏按钮');
|
||
// if (e.target.fullScreen) {
|
||
// plus.screen.lockOrientation('landscape'); //锁死屏幕方向为竖屏
|
||
// }else{
|
||
// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
|
||
// }
|
||
},
|
||
// 自动全屏（核心：修复iOS方向错乱）
|
||
autoFullScreen() {
|
||
if (!this.videoContext) return;
|
||
|
||
// 区分平台设置方向：iOS用0自适应，安卓用90横屏
|
||
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||
|
||
// 延迟执行，避免视频未加载完成导致全屏失败
|
||
setTimeout(() => {
|
||
this.videoContext.requestFullScreen({
|
||
direction: direction
|
||
});
|
||
}, 300)
|
||
},
|
||
// 手动横屏全屏
|
||
openFullScreen() {
|
||
if (!this.videoContext) return;
|
||
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||
this.videoContext.requestFullScreen({
|
||
direction
|
||
});
|
||
},
|
||
// 退出全屏
|
||
closeFullScreen() {
|
||
if (!this.videoContext) return;
|
||
this.videoContext.exitFullScreen();
|
||
},
|
||
// 播放监听
|
||
onPlay() {
|
||
console.log("视频开始播放");
|
||
},
|
||
// 暂停监听
|
||
onPause() {
|
||
console.log("视频暂停");
|
||
},
|
||
// 全屏状态切换
|
||
handleFullScreenChange(e) {
|
||
// 全屏隐藏导航栏，退出显示
|
||
// uni.setNavigationBarHidden(!!e.detail.fullScreen);
|
||
console.log("全屏状态：", e.detail.fullScreen);
|
||
},
|
||
// 视频播放完毕
|
||
onVideoEnd() {
|
||
this.closeFullScreen();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.video-page {
|
||
width: 100%;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.video-box {
|
||
width: 100%;
|
||
/* 自适应高度，避免拉伸 */
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
</style> |