<template>
<view class="content" style="padding-top: 44px;">
<u-navbar title="个人中心" :autoBack="true">
</u-navbar>
<video id="liveVideo" :src="src" :autoplay="false" class="live-video" :class="{'screen-video':isFullScreen}"
@fullscreenchange="fullscreenChange" @tap.stop="videoClick(isOverlay)" :controls="false"
@timeupdate="onTimeUpdate" :direction="0" enable-auto-rotation @loadedmetadata="onLoadedMetadata" @play="onPlay" @pause="onPause">
<!-- 遮罩 自定义 -->
<view class="video-overlay">
<!-- 返回 -->
<view class="_flex video-header" v-if="isFullScreen">
<!-- <u-icon name="arrow-left" :labelColor="iconColor" :color="iconColor" size="22"
@click="toggleFullscreen(1)"></u-icon> -->
<image src="/static/rotate.png" @click="toggleFullscreen(1)" class="img-icon24"></image>
<view class="video-header-title">测试</view>
</view>
<!-- 进度条 -->
<view class="video-list _flex" v-if="isOverlay">
<image :src="`/static/${videoPlay?'play':'pause'}.png`" @click="videoPlayAndPause"
class="img-icon24"></image>
<view class="video-date" style="margin: 0 10rpx;">{{ currentTimeFormatted }}</view>
<slider :value="currentTime" style="flex:1" block-size="16" activeColor="#FF5C00"
backgroundColor="hsla(0,0%,100%,.4)" @change="setProgress" :max="duration" block-color="#fff" />
<view class="video-date">{{durationFormatted}}</view>
<image src="/static/rotate.png" style="margin-left: 20rpx;" v-if="!isFullScreen"
@tap.stop="toggleFullscreen(2)" class="img-icon24"></image>
</view>
</view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
isFullScreen: false,
currentTime: 0,
duration: 0,
videoPlay: false,
isOverlay: false
}
},
computed: {
// 格式化当前播放时间(秒 -> 分:秒)
currentTimeFormatted() {
return this.formatTime(this.currentTime);
},
// 格式化总时长
durationFormatted() {
return this.formatTime(this.duration);
},
},
onLoad() {
},
mounted() {
// this.videoPlay=!this.autoplay
this.videoContext = uni.createVideoContext('liveVideo', this);
// this.videoContext.exitFullScreen()
},
methods: {
// 点击视频事件
videoClick(e) {
console.log(e, this.videoPlay && e);
this.isOverlay = this.videoPlay && e ? true : !e
},
onTimeUpdate(e) {
// 更新当前播放时间
this.currentTime = e.detail.currentTime;
},
// 视频元数据加载完成(获取总时长)
onLoadedMetadata(e) {
this.duration = e.detail.duration;
},
// 格式化时间(将秒数转换为 mm:ss 格式)
formatTime(seconds) {
const min = Math.floor(seconds / 60);
const sec = Math.floor(seconds % 60);
return `${min}:${sec < 10 ? '0' : ''}${sec}`;
},
videoPlayAndPause() {
if (this.videoPlay) {
this.videoPlay = false
this.videoContext.pause() //暂停
} else {
this.videoPlay = true
this.videoContext.play() //播放
}
console.log(this.videoPlay);
},
onPlay(e) {
this.videoPlay = true
},
onPause(e) {
// this.showState = 0
this.videoPlay = false
},
// 全屏||退出全屏
async toggleFullscreen(e) {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
console.log(this.isFullScreen, page);
if (this.isFullScreen) {
await this.videoContext.exitFullScreen()
return
}
this.videoContext.requestFullScreen({direction:0})
},
// 设置播放进度
setProgress(e) {
const val = e.detail.value
this.videoContext.seek(val)
},
// 全屏变化
fullscreenChange(e) {
let lastFullscreen = false;
const isFullscreen = e.detail.fullScreen
this.isFullScreen = isFullscreen
if (isFullscreen !== lastFullscreen && lastFullscreen == true) {
// 状态改变,执行处理逻辑
if (!isFullscreen) {
lastFullscreen = false;
// 退出全屏时显示导航栏
// uni.showNavigationBarLoading();
this.videoContext.requestFullScreen();
} else {
lastFullscreen = true;
// uni.showNavigationBarLoading();
this.videoContext.exitFullScreen();
}
}
}
}
}
</script>
<style lang="scss">
._flex {
display: flex;
align-items: center;
}
.live-video {
position: relative;
display: block;
width: 100%;
}
.video-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: 998;
}
.video-list {
color: #fff;
position: absolute;
width: calc(100% - 20upx);
/* height: 88rpx; */
padding: 6upx 10upx;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.38) 33.33%, rgba(0, 0, 0, 0.75) 66.67%, rgba(0, 0, 0, 0.75) 100%);
}
.video-header {
height: 88upx;
padding: 0 36upx 0 18upx;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.38) 33.33%, rgba(0, 0, 0, 0.75) 66.67%, rgba(0, 0, 0, 0.75) 100%);
.video-header-title {
margin-left: 36rpx;
}
}
.live-count {
color: #fff;
margin: 30upx 20upx 20upx;
text-align: right;
}
.video-state,
.video-list,
.img-icon24,
.u-icon,
.multiple-item,
.error-but {
pointer-events: auto;
/* 单独启用事件 */
}
.video-overlay,
.video-header,
.multiple-box,
.video-error {
pointer-events: none;
/* 允许事件穿透到video元素 */
}
.video-state {
// width: 130rpx;
// height: 130rpx;
padding: 20upx;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.play-icon {
width: 100%;
height: 100%;
}
.pause-ico {
width: 72upx;
height: 72upx;
}
}
.img-icon24 {
width: 48upx;
height: 48upx;
}
.multiple-box {
background: rgba(0, 0, 0, 0.75);
height: calc(100% - 84upx);
position: absolute;
padding: 60upx 24upx 24upx;
right: 0;
z-index: 999;
// #ifdef H5
display: flex;
justify-content: center;
flex-direction: column;
// #endif
color: #fff;
top: 0;
.multiple-item {
margin: 24upx;
padding: 10upx 0;
}
}
.primary-color {
color: #FF5C00;
}
.video-error {
color: #fff;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30rpx;
justify-content: center;
.video-error-text {
padding-bottom: 40upx;
}
.error-but {
padding: 24upx 16upx;
border: 1px solid #fff;
display: inline-block;
border-radius: 8upx;
}
}
</style>

8***@qq.com
- 发布:2025-08-15 11:36
- 更新:2025-08-15 11:36
- 阅读:12
0 个回复