<template>
<view style="display: flex;flex: 1;">
<video id='video1' class="video" :src="src1" controls="true" :danmu-list="list" codec="software"
http-cache="true" play-strategy="0" danmu-btn="false" enable-danmu="true" :loop="true" muted="true"
auto-play="true" enable-progress-gesture="false" direction="-90" show-loading="true" show-mute-btn="true"
@fullscreenchange="fullscreenchange">
<!-- 全屏时的页面展示 -->
<cover-view v-if="isFullScreen" class="cover_video">
<view style=" padding: 0rpx 50rpx 0rpx 50rpx; height: 80rpx; ">
<slider class="slide_full_view" :value="current" :max="duration" @changing="changing"
@change="change" block-size="20" activeColor="#7a7a7a" backgroundColor="#f5f5f5"
block-color="#f5f5f5" />
</view>
<view style="height: 50rpx;width: 100rpx; background-color: white; align-items: center;justify-content: center; margin-left: 100rpx;" @click="startAdd">点击这个验证</view>
</cover-view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
src1: "http://www.w3school.com.cn/i/movie.mp4",
videoContext: uni.createVideoContext("video1", this),
isFullScreen: false,
current: 0,
duration: 5,
}
},
methods: {
fullscreenchange(e) {
// 打开 nvue 子窗体
console.log("fullscreenchange:" + JSON.stringify(e));
this.isFullScreen = e.detail.fullScreen;
},
startAdd() {
this.current = 0
this.timer = setInterval(() => {
if (this.current < this.duration) {
this.current = this.current + 1
} else {
clearInterval(this.timer)
}
}, 1000)
}
}
} </script>
<style>
/deep/ .uni-slider-handle-wrapper {
height: 10rpx !important;
}
/deep/ .uni-slider-thumb {
margin-top: 4rpx;
}
/deep/ .uni-slider-track {
height: 10rpx !important;
}
.cover_video {
display: flex;
flex: 1;
justify-content: flex-end;
} </style>
2***@qq.com (作者)
可以用官网的slide页面源码。创建一个nvue的页面。nvue界面设置横屏，可以必现这个问题。
2024-10-15 17:25
DCloud_UNI_OttoJi
回复 2***@qq.com: 私聊沟通中
2024-10-17 15:25