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>
|