修复视频播放控制条兼容问题,修改部分代码逻辑,去除部分打印代码
This commit is contained in:
parent
1550bcd19c
commit
91e8d66941
|
|
@ -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>
|
||||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@
|
|||
}
|
||||
onLoad((opt) => {
|
||||
Object.assign(options, opt)
|
||||
console.log(options);
|
||||
init()
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue