播放视频页面添加
This commit is contained in:
cjl520cy
parent
f1e4ee07b0
commit
9de417bdfc
|
|
@ -10,6 +10,13 @@
|
|||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"screenOrientation" : [
|
||||
//可选，字符串数组类型，应用支持的横竖屏
|
||||
"portrait-primary", //可选，字符串类型，支持竖屏
|
||||
"portrait-secondary", //可选，字符串类型，支持反向竖屏
|
||||
"landscape-primary", //可选，字符串类型，支持横屏
|
||||
"landscape-secondary" //可选，字符串类型，支持反向横屏
|
||||
],
|
||||
"compatible" : {
|
||||
"ignoreVersion" : true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
|
||||
},
|
||||
|
|
|
|||
|
|
@ -596,6 +596,12 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/photoAlbum/videoplayer",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/photoAlbum/videoList",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -220,14 +220,16 @@
|
|||
// uni.navigateTo({
|
||||
// url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
|
||||
// });
|
||||
this.videoPlay = true; // 显示播放盒子
|
||||
this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
|
||||
this.videoUrl = this.formData.url;
|
||||
this.videoContext.requestFullScreen({
|
||||
direction: 90
|
||||
});
|
||||
this.videoContext.play();
|
||||
|
||||
// this.videoPlay = true; // 显示播放盒子
|
||||
// this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
|
||||
// this.videoUrl = this.formData.url;
|
||||
// this.videoContext.requestFullScreen({
|
||||
// direction: 90
|
||||
// });
|
||||
// this.videoContext.play();
|
||||
uni.navigateTo({
|
||||
url: '/pages/shop/photoAlbum/videoplayer?url=' + this.formData.url
|
||||
})
|
||||
|
||||
},
|
||||
async submitPhoto() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue