更新:阿里云视频播放器
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<view class="page-content" :style="{ height: contentHeight }">
|
||||
<!-- 视频播放器 -->
|
||||
<view v-if="videoList.length > 0" class="video-section">
|
||||
<VideoPlayer
|
||||
<!-- <VideoPlayer
|
||||
ref="videoPlayerRef"
|
||||
:videoList="videoList"
|
||||
:currentIndex="currentVideoIndex"
|
||||
@@ -15,6 +15,12 @@
|
||||
@end="handleVideoEnd"
|
||||
@fullscreen="handleFullscreen"
|
||||
@change="handleVideoChange"
|
||||
/> -->
|
||||
<AliyunPlayer
|
||||
ref="videoPlayerRef"
|
||||
:currentVideo="videoList[currentVideoIndex]"
|
||||
:currentVideoList="videoList"
|
||||
@unlockChangeVideo="changeVideoLock = false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -107,10 +113,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
|
||||
import { courseApi } from '@/api/modules/course'
|
||||
import VideoPlayer from '@/components/course/VideoPlayer.vue'
|
||||
// import VideoPlayer from '@/components/course/VideoPlayer.vue'
|
||||
import AliyunPlayer from '@/components/ali-video/index.vue'
|
||||
import type { IChapterDetail, IVideo } from '@/types/course'
|
||||
|
||||
// 页面参数
|
||||
@@ -166,14 +173,12 @@ onLoad((options: any) => {
|
||||
* 加载章节详情
|
||||
*/
|
||||
const loadChapterDetail = async () => {
|
||||
try {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
|
||||
try {
|
||||
const res = await courseApi.getChapterDetail(chapterId.value)
|
||||
if (res.code === 0 && res.data) {
|
||||
chapterDetail.value = res.data.detail
|
||||
videoList.value = res.data.videos || []
|
||||
|
||||
|
||||
// 如果有历史播放记录,定位到对应视频
|
||||
if (res.data.current) {
|
||||
const index = videoList.value.findIndex(v => v.id === res.data.current)
|
||||
@@ -181,20 +186,37 @@ const loadChapterDetail = async () => {
|
||||
currentVideoIndex.value = index
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保组件已经渲染完成
|
||||
await nextTick()
|
||||
if (videoPlayerRef.value) {
|
||||
console.log('准备调用 init 方法')
|
||||
await videoPlayerRef.value.init({
|
||||
currentVideo: videoList.value[currentVideoIndex.value],
|
||||
currentVideoList: videoList.value
|
||||
}, false)
|
||||
} else {
|
||||
console.error('videoPlayerRef.value 为空,无法初始化播放器')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载章节详情失败:', error)
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择视频
|
||||
*/
|
||||
const selectVideo = (index: number) => {
|
||||
const selectVideo = async (index: number) => {
|
||||
if (index === currentVideoIndex.value) return
|
||||
|
||||
console.log('切换视频:', index, videoList.value[index])
|
||||
currentVideoIndex.value = index
|
||||
|
||||
// 调用播放器的 changeVideo 方法
|
||||
if (videoPlayerRef.value) {
|
||||
await videoPlayerRef.value.changeVideo(videoList.value[index])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user