修复视频播放控制条兼容问题,修改部分代码逻辑,去除部分打印代码

This commit is contained in:
YeMingfei666 2025-01-22 11:41:09 +08:00
parent 1550bcd19c
commit 91e8d66941
3 changed files with 131 additions and 50 deletions

View File

@ -1,25 +1,31 @@
<template>
<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}" :key="index">
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
play-btn-position="center" :show-center-play-btn="false" :show-play-btn="false" :controls="!isPlying"
@click.stop="videoClick()" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate" @waiting="waiting()"
object-fit="cover" @pause="onpause" @play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)"
:play-strategy="2" :show-loading="true" codec="software" :muted="false" :loop="loop"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
:autoplay="autoplay" @ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
<!-- :controls="showControls" -->
<video class=" video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
play-btn-position="bottom" :show-center-play-btn="true" :show-play-btn="true" @click.stop="videoClick()"
@loadedmetadata="loadedmetadata" @timeupdate="timeupdate" @waiting="waiting()" object-fit="cover"
@loadeddata="waiting()" @pause="onpause"
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
:show-loading="true" codec="software" :muted="false" :loop="loop" :enable-progress-gesture="false"
:poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId" :autoplay="autoplay" @ended="ended"
:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg" mode="aspectFill">
</image>
<!-- #ifdef APP -->
<view class="control-play-cover" v-if="showControls&&isIos" @click="playCoverClick()">
</view>
<!-- #endif -->
<!-- <view class="progress" v-if="showVideo&&!isPlying" @click.stop>
<progress-vue @touchstart="progressScroll" @touchend="progressScrollEnd"></progress-vue>
</view> -->
<view class="play-icon" v-if="videoIsLoadedmetadata&&showVideo&&!isPlying" @click.stop="videoClick()"
:style="playStyle">
<!-- <view class="play-icon" v-if="showVideo&&!isPlying" @click.stop="playIconClick()" :style="playStyle">
<image class="icon" src="@/static/images/play.png" mode=""></image>
</view>
</view> -->
<view class="info" v-if="!isCommand" :style="infoStyle">
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
@ -63,6 +69,9 @@
<script setup>
import * as Api from '@/api/video/index.js'
// #ifdef APP
const domModule = uni.requireNativePlugin('dom')
// #endif
import progressVue from './progress.vue'
import {
computed,
@ -79,6 +88,10 @@
// #endif
const props = defineProps({
isIos:{
type: Boolean,
default: false
},
isAndriod: {
type: Boolean,
default: false
@ -153,12 +166,21 @@
type: Number,
default: 1
},
showControls: {
showAndriod: {
type: Boolean,
default: true
default: false
}
})
let isWaiting = ref(true)
function waiting() {
console.log('waiting');
isWaiting.value = true
}
let showControls = ref(props.showAndriod?false:true)
let playPercent = ref(0)
@ -184,9 +206,8 @@
}
function controlstoggles(e) {
console.log('controlstoggles');
console.log(e);
// emits('controlstoggles', e)
showControls.value = e.detail.show
emits('controlstoggles', e)
}
function toDetail() {
@ -196,13 +217,11 @@
emits('toDetail')
}
function waiting() {
}
let videoIsLoadedmetadata = ref(false)
function loadedmetadata() {
console.log('loadedmetadata');
videoIsLoadedmetadata.value = true
}
@ -230,8 +249,6 @@
}
function timeupdate(e) {
console.log('timeupdate');
console.log(e);
playPercent.value = e.detail.currentTime * 100 / e.detail.duration
//loding
uni.hideLoading()
@ -246,37 +263,45 @@
}
}
let videoBar = null
let watingTimer = null
function videoPlay() {
if (isFirstPlay && !isPlayFinish) {
sendPlayStatus('start')
}
isFirstPlay = false
setTimeout(() => {
isPlying.value = true
}, 100)
isPlying.value = true
clearTimeout(watingTimer)
watingTimer = setTimeout(() => {
isWaiting.value = false
}, 1000)
// showControls.value = false
// #ifdef H5
emits('controlstoggles', {
detail: {
show: false
}
})
videoBar = videoBar ? videoBar : document.querySelector('.uni-video-bar');
videoBar.style.cssText = 'display:none;';
// #endif
// #ifdef APP
if (!props.showAndriod) {}
// #endif
}
function onpause() {
setTimeout(() => {
isPlying.value = false
}, 100)
isPlying.value = false
// showControls.value = true
// #ifdef H5
emits('controlstoggles', {
detail: {
show: true
}
})
videoBar = videoBar ? videoBar : document.querySelector('.uni-video-bar');
videoBar.style.cssText = '';
// #endif
}
@ -301,8 +326,36 @@
emits('popupShow', key)
}
function playCoverClick() {
console.log('playCoverClick');
if (video) {
if (isPlying.value) {
video.pause()
} else {
video.play()
}
}
}
function playIconClick(){
if (video) {
if (isPlying.value) {
video.pause()
} else {
video.play()
}
}
}
function videoClick() {
console.log('videoClick');
// #ifdef APP
// ios
if (isPlying.value&&showControls.value) {
return
}
// #endif
if (video) {
if (isPlying.value) {
video.pause()
@ -335,8 +388,6 @@
}
const showVideo = computed(() => {
if (props.isAndriod) {
console.log('props.nowIndex === props.index ');
console.log(props.nowIndex, props.index);
return (props.nowIndex === props.index && props.item.videoUrl) ? true : false
} else {
return props.current === props.index && props.item.videoUrl
@ -353,7 +404,6 @@
video = uni.createVideoContext('myVideo' + props.item.courseDetailsId)
video.playbackRate(props.playSpeeds)
video.play()
console.log('init play');
}
} catch (error) {
console.error('------')
@ -367,7 +417,6 @@
}
})
watch(() => showVideo.value, (newval) => {
console.log('showVideo change:' + newval);
if (newval) {
isFirstPlay = true
isPlayFinish = false
@ -400,15 +449,29 @@
}
})
const infoStyle = computed(() => {
// #ifdef H5
return {
transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?0:'-750rpx'})`
}
// #endif
return {
transform: `translateX(${(showControls.value||!props.item.videoUrl)?0:'-750rpx'})`
}
// return {
// transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?0:'-750rpx'})`
// }
})
const rightStyle = computed(() => {
// #ifdef H5
return {
transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?'0':60}px)`
}
// #endif
return {
transform: `translateX(${(showControls.value||!props.item.videoUrl)?'0':60}px)`
}
})
</script>
@ -419,6 +482,12 @@
position: relative;
}
/* 假设控制条的类名为 uni-video-controls */
.uni-video-controls {
transition: none !important;
-webkit-transition: none !important;
}
.box {
/* #ifdef H5 */
flex: 1;
@ -579,4 +648,15 @@
width: 56rpx;
height: 56rpx;
}
.control-play-cover {
position: absolute;
left: 10px;
bottom: 0;
width: 38px;
height: 44px;
// background-color: red;
background-color: transparent;
z-index: 1;
}
</style>

View File

@ -4,7 +4,11 @@
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:isAndriod="isAndriod" :isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight"
:isAndriod="isAndriod"
:showAndriod="showAndriod"
:isIos="isIos"
:isH5="isH5"
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight"
:isCommand="isCommand" :showControls="control.showControls" @toDetail="toDetail(item,index)"
@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
@ -24,7 +28,11 @@
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
<swiper-item v-for="(item,index) in videoList" :key="index">
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
:isAndriod="isAndriod" :isTabbar="isTabbar" @playStatusChange="playStatusChange"
:isAndriod="isAndriod"
:showAndriod="showAndriod"
:isIos="isIos"
:isH5="isH5"
:isTabbar="isTabbar" @playStatusChange="playStatusChange"
:showControls="control.showControls" :current="current" :isCollect="isCollect"
@toDetail="toDetail(item,index)" @controlstoggles="controlstoggles" :playSpeeds="playSpeeds"
:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@ -346,7 +354,6 @@
})
function controlstoggles(e) {
console.log('controlstoggles');
control.showControls = e.detail.show
control.showBack = control.showControls
}
@ -477,7 +484,6 @@
if (isFirst) {
$mountedComponents[index] = true
}
console.log('appear:' + index);
if (!initing) {
cacheIndex = index
}
@ -612,10 +618,8 @@
function goListPosition(index) {
clearTimeout(positonmer)
console.log('goListPosition:' + index)
const el = refList.value[index]
if (initing) {
console.log($mountedComponents);
if (!$mountedComponents[index]) {
positonmer = setTimeout(() => {
goListPosition(index)
@ -850,7 +854,6 @@
const lastIndex = listLen - 1
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
nowIndex.value = index
console.log('setVideoList nowIndex' + index);
let position = ''
if (index === 0) {
position = 'start'
@ -885,7 +888,6 @@
videoList.value = [props.list[index + 1], props.list[index - 1], item]
}
}
console.log(videoList.value, 'debug');
if (!item.videoUrl) {
nextTick(() => {
setTimeout(() => {

View File

@ -98,7 +98,6 @@
}
onLoad((opt) => {
Object.assign(options, opt)
console.log(options);
init()
})