修复ios视频兼容性问题,改为同h5播放形式

This commit is contained in:
2025-01-17 17:36:09 +08:00
parent 48154cf82f
commit 6c4a6ea804
3 changed files with 81 additions and 45 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}"> <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" <video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
play-btn-position="center" play-btn-position="center"
@@ -78,6 +78,10 @@
// #endif // #endif
const props = defineProps({ const props = defineProps({
isAndriod:{
type: Boolean,
default: false
},
height:{ height:{
type:Number, type:Number,
default:0 default:0
@@ -296,19 +300,18 @@
let video = null let video = null
function disappear() { function disappear(e) {
emits('disappear') emits('disappear',e)
if (video) { if (video) {
video.pause() video.pause()
} }
} }
const showVideo = computed(() => { const showVideo = computed(() => {
// #ifdef H5 if(props.isAndriod){
return props.current === props.index && props.item.videoUrl return props.nowIndex === props.index && props.item.videoUrl ?true :false
// #endif }else{
// #ifdef APP return props.current === props.index && props.item.videoUrl
return props.nowIndex === props.index && props.item.videoUrl ?true :false }
// #endif
}) })
onMounted(() => { onMounted(() => {
init() init()

View File

@@ -1,11 +1,11 @@
<template> <template>
<!-- #ifdef H5 --> <view v-if="isH5||isIos" class=" w-full box" style="width: 100vw;">
<view class=" w-full box" style="width: 100vw;">
<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length" <swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1" @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200"> @transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
<swiper-item v-for="(item,index) in videoList" :key="index"> <swiper-item v-for="(item,index) in videoList" :key="index">
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight" <list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
:isAndriod="isAndriod"
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :showControls="control.showControls" :isTabbar="isTabbar" @playStatusChange="playStatusChange" :showControls="control.showControls"
:current="current" :isCollect="isCollect" @toDetail="toDetail(item,index)" :current="current" :isCollect="isCollect" @toDetail="toDetail(item,index)"
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex" @controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
@@ -14,26 +14,25 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- #endif -->
<!-- #ifdef APP -->
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true" <list v-if="showAndriod" :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
@loadmore="loadmore" :scrollable="true"> @loadmore="loadmore" :scrollable="true">
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)"> <cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')"> <view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect" <list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:isAndriod="isAndriod"
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :isCommand="isCommand" :isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :isCommand="isCommand"
:showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted" :showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted"
@controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex" @controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex"
@appear="appear($event,item,index)" :playSpeeds="playSpeeds" @disappear="disappear(item,index)" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)" @disappear="disappear($event, item,index)" @dianzanClick="dianzanClick(item,index)"
@share="share(item)" @zhuijuClick="zhuijuClick(item)"
@popupShow="popupShow($event,item,index)"></list-item-vue> @popupShow="popupShow($event,item,index)"></list-item-vue>
</view> </view>
</cell> </cell>
</list> </list>
<!-- #endif -->
<!-- 返回按钮 --> <!-- 返回按钮 -->
<view class="back-icon" v-if="!isTabbar&&control.showBack"> <view class="back-icon" v-if="!isTabbar&&control.showBack">
<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon> <u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
@@ -264,6 +263,16 @@
onUnmounted onUnmounted
} from 'vue'; } from 'vue';
let isH5=true
// #ifdef H5
isH5=false
// #endif
const sysinfo=uni.getSystemInfoSync()
const isIos=sysinfo.platform=='ios'?true:false
const isAndriod=sysinfo.platform=='android'?true:false
const showAndriod=!isH5&&isAndriod
let initing = true let initing = true
const refPoster = ref(null) const refPoster = ref(null)
@@ -404,18 +413,17 @@
console.log(e); console.log(e);
} }
async function xuanjiInit() { async function xuanjiInit() {
// #ifdef APP
const height = 44 const height = 44
const marginBottom = 10 const marginBottom = 10
const oneItemHeight = height + marginBottom const oneItemHeight = height + marginBottom
const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 + const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
oneItemHeight / 2 oneItemHeight / 2
if(props.list.length<=15){ if (props.list.length <= 15) {
xuanjiData.scrollTop=0 xuanjiData.scrollTop = 0
return return
} }
xuanjiData.scrollTop = scrollTop * 1 <0 ? 0 : scrollTop xuanjiData.scrollTop = scrollTop * 1 < 0 ? 0 : scrollTop
// #endif
// #ifdef H5 // #ifdef H5
if (!xuanjiData.items[props.list.length - 1]) { if (!xuanjiData.items[props.list.length - 1]) {
@@ -456,17 +464,42 @@
if (isFirst) { if (isFirst) {
$mountedComponents[index] = true $mountedComponents[index] = true
} }
console.log('appear:' + index);
// if($common.isIos&&!initing){
// console.log('appear:'+index);
// nowIndex.value = index
// const item = props.list[nowIndex.value]
// if (!item.videoUrl) {
// popupShow('pay', item, nowIndex.value)
// }
// cacheIndex = null
// return
// }
if($common.isIos){
nowIndex.value = index
const item = props.list[nowIndex.value]
if (!item.videoUrl) {
popupShow('pay', item, nowIndex.value)
}
cacheIndex = null
return
}
if (!initing) { if (!initing) {
cacheIndex = index cacheIndex = index
} }
if($common.isIos){
console.log('appear:'+index);
}
} }
function disappear(item, index) { function disappear(e, item, index) {
if ($common.isIos) {
if (index == nowIndex.value && cacheIndex != null && !initing) { if(e.direction=='up'){
cacheIndex=nowIndex.value-1<0?0:nowIndex.value-1
}else{
cacheIndex=(nowIndex.value+1>(props.list.length-1)) ? props.list.length-1:nowIndex.value+1
}
return
}
if (index == nowIndex.value && cacheIndex !== null && !initing) {
console.log('disappear' + index); console.log('disappear' + index);
console.log('disappear nowIndex' + nowIndex.value); console.log('disappear nowIndex' + nowIndex.value);
console.log('cacheIndex' + cacheIndex); console.log('cacheIndex' + cacheIndex);
@@ -693,15 +726,14 @@
let item = props.list.find(v => props.options.courseDetailsId == v.courseDetailsId) let item = props.list.find(v => props.options.courseDetailsId == v.courseDetailsId)
item = item ? item : props.info.current; item = item ? item : props.info.current;
if (JSON.stringify(item) !== '{}') { if (JSON.stringify(item) !== '{}') {
// #ifdef H5 if(showAndriod){
setVideoList(item) nextTick(() => {
// #endif const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
// #ifdef APP goListPosition(index)
nextTick(() => { })
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId) }else{
goListPosition(index) setVideoList(item)
}) }
// #endif
} }
} }
@@ -884,9 +916,9 @@
}) })
watch(() => props.list.length, (newval) => { watch(() => props.list.length, (newval) => {
console.log('props.list.length change' + newval); console.log('props.list.length change' + newval);
// #ifdef H5 if(!showAndriod){
init() init()
// #endif }
}) })
watch(() => nowIndex.value, (newval) => {}) watch(() => nowIndex.value, (newval) => {})
const nowDanjiPrice = computed(() => { const nowDanjiPrice = computed(() => {

View File

@@ -39,6 +39,7 @@
isFirstLoad = false isFirstLoad = false
Object.assign(state, res) Object.assign(state, res)
state.list = res.list state.list = res.list
console.log(state.list);
} catch (error) { } catch (error) {
// if(getCurrentPages().length>=2){ // if(getCurrentPages().length>=2){
// uni.navigateBack() // uni.navigateBack()