更新

src/views/coursewarePlay/coursewarePlay.vue

@@ -5,7 +5,7 @@
 -->
 <template>
    <div class="coursewarePlay">
-      <videoPlay ref="videoPlayDom" @ready="handleVideoReady" @ended="handleChangeCourseware(1)" :listen-win-events="true">
+      <videoPlay ref="videoPlayDom" @ended="handleChangeCourseware(1)" :listen-win-events="true">
          <div class="leftTools posTools">
             <div v-if="activeCoursewareIndex > 0" class="posBtn" @click="handleChangeCourseware(-1)">
                <img src="@/img/coursewarePlay/shang.png" />
@@ -130,7 +130,7 @@ const drawerShow = ref(false)
 // 课程总时间
 const coursewareTotalTIme = ref(0)
 watch(activeCourseware, () => {
-   activeCourseware.value && videoPlayDom.value?.playVideo({ src: activeCourseware.value.content })
+   activeCourseware.value && videoPlayDom.value?.playVideo(activeCourseware.value.content)
 })
 onMounted(() => {
    document.addEventListener("keydown", handleVideoKeydown)
@@ -138,6 +138,7 @@ onMounted(() => {
 onUnmounted(() => {
    document.removeEventListener("keydown", handleVideoKeydown)
 })
+getCoursewareList()
 function getCoursewareList() {
    httpAjaxErrMsg(userStoreHook.roles === "GYM" ? getLessonCourseDetail_gym : getLessonCoursewareDetail_gyt, route.params.id as string).then(res => {
       if (res.code === 200) {
@@ -209,10 +210,6 @@ function filterPointList(pointList: any[], parentData?: { ids: string[]; name: s
    })
 }
 
-function handleVideoReady() {
-   getCoursewareList()
-}
-
 function handleChangeCourseware(index: -1 | 1) {
    const newIndex = index + activeCoursewareIndex.value
    if (newIndex < 0 || newIndex > flattenCoursewareList.value.length - 1) {

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -86,6 +86,7 @@ const emits = defineEmits<{
 }>()
 const videoId = "video" + UUID()
 let playerVm: Record<string, any>
+let isReady = false // 是否初始化播放器播放器
 
 /* 时间控制器 */
 const timeController = reactive({
@@ -154,6 +155,7 @@ function initVideo() {
    // 初始化完成
    playerVm.ready(() => {
       console.log("播放器初始化完成")
+      isReady = true
       emits("ready")
    })
    // 开始加载数据时
@@ -192,7 +194,22 @@ function initVideo() {
 /**
  * 播放  需要在ready之后调用
  */
-function playVideo({ src }: { src: string }) {
+// 接口请求可能在播放之前 所以这里等待播放器初始化
+let _time: any
+function playVideo(src: string) {
+   _time && clearInterval(_time)
+   if (isReady) {
+      handlePlayVideo(src)
+   } else {
+      _time = setInterval(() => {
+         if (isReady) {
+            clearInterval(_time)
+            handlePlayVideo(src)
+         }
+      }, 60)
+   }
+}
+function handlePlayVideo(src: string) {
    playerVm?.src(src)
    showController()
 }