czg_team/new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

暂时使用原生进度条。自定义进度条调试中

Browse Source
This commit is contained in:
YeMingfei666
2025-01-21 17:25:32 +08:00
parent 1be09bf67a
commit 896287e5cf
3 changed files with 168 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
components/my-video-list/list-item.vue
View File

@@ -1,27 +1,26 @@
<template>
<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}" :key="index">
<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"
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>
<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg"
mode="aspectFill">
<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg" mode="aspectFill">
</image>
<view class="play-icon" v-if="videoIsLoadedmetadata&&showVideo&&!isPlying" @click.stop="videoClick()" :style="playStyle">
<image class="icon" src="@/static/images/play.png" mode=""></image>
<!-- <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">
<image class="icon" src="@/static/images/play.png" mode=""></image>
</view>
<view class="info" v-if="!isCommand" :style="infoStyle">
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
@@ -64,6 +63,7 @@
<script setup>
import * as Api from '@/api/video/index.js'
import progressVue from './progress.vue'
import {
computed,
nextTick,
@@ -79,13 +79,13 @@
// #endif
const props = defineProps({
isAndriod:{
isAndriod: {
type: Boolean,
default: false
},
height:{
type:Number,
default:0
height: {
type: Number,
default: 0
},
item: {
type: Object,
@@ -111,7 +111,7 @@
}
}
},
isTabbar:{
isTabbar: {
type: Boolean,
default: false
},
@@ -158,16 +158,31 @@
default: true
}
})
let playPercent = ref(0)
let autoplay = ref(props.item.videoUrl ? true : false)
const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'playStatusChange'
'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'playStatusChange', 'progressScroll',
'progressScrollEnd'
])
function posterClick(){
if(!props.item.videoUrl){
popupShow('pay',props.item)
function progressScroll(e) {
emits('progressScroll')
}
function progressScrollEnd(e) {
emits('progressScrollEnd')
}
function posterClick() {
if (!props.item.videoUrl) {
popupShow('pay', props.item)
}
}
function controlstoggles(e) {
console.log('controlstoggles');
console.log(e);
@@ -184,10 +199,11 @@
function waiting() {
}
let videoIsLoadedmetadata=ref(false)
function loadedmetadata(){
videoIsLoadedmetadata.value=true
let videoIsLoadedmetadata = ref(false)
function loadedmetadata() {
videoIsLoadedmetadata.value = true
}
@@ -214,6 +230,9 @@
}
function timeupdate(e) {
console.log('timeupdate');
console.log(e);
playPercent.value = e.detail.currentTime * 100 / e.detail.duration
//隐藏loding
uni.hideLoading()
if (isPlayFinish) {
@@ -232,7 +251,9 @@
sendPlayStatus('start')
}
isFirstPlay = false
isPlying.value = true
setTimeout(() => {
isPlying.value = true
}, 100)
// #ifdef H5
emits('controlstoggles', {
detail: {
@@ -240,12 +261,14 @@
}
})
// #endif
}
function onpause() {
isPlying.value = false
setTimeout(() => {
isPlying.value = false
}, 100)
// #ifdef H5
emits('controlstoggles', {
detail: {
@@ -253,7 +276,7 @@
}
})
// #endif
}
@@ -305,17 +328,17 @@
let video = null
function disappear(e) {
emits('disappear',e)
emits('disappear', e)
if (video) {
video.pause()
}
}
const showVideo = computed(() => {
if(props.isAndriod){
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{
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
}
})
@@ -355,7 +378,7 @@
video = null
}
})
const customStyle = computed(() => {
// #ifdef H5
return {
@@ -366,14 +389,14 @@
return {}
// #endif
})
const playStyle=computed(()=>{
if(isPlying.value){
const playStyle = computed(() => {
if (isPlying.value) {
return {
bottom:'0'
bottom: '0'
}
}
return {
bottom: props.isTabbar ? (50+44 +'px') : '44px'
bottom: props.isTabbar ? (50 + 44 + 'px') : '44px'
}
})
const infoStyle = computed(() => {
@@ -509,7 +532,8 @@
justify-content: center;
align-items: center;
}
.play-icon{
.play-icon {
position: absolute;
left: 0;
right: 0;
@@ -517,12 +541,13 @@
bottom: 0;
justify-content: center;
align-items: center;
$icon-size:80rpx;
.icon{
$icon-size: 80rpx;
.icon {
width: $icon-size;
height: $icon-size;
}
}
.hot {
@@ -541,6 +566,15 @@
}
}
.progress {
padding: 20rpx;
position: absolute;
bottom: 20rpx;
left: 0;
right: 0;
z-index: 1;
}
.zhifubao {
width: 56rpx;
height: 56rpx;