测试修改播放器

src/views/coursewarePlay/component/video-play.tsx

@@ -121,11 +121,11 @@ export default defineComponent({
       clearTimeout(playTimer);
       if (state === 'play') {
         playTimer = setTimeout(() => {
-          videoItem.value?.play();
+          videoRef.value?.play();
           data.playState = 'play';
         }, 100);
       } else {
-        videoItem.value?.pause();
+        videoRef.value?.pause();
         data.playState = 'pause';
       }
 
@@ -133,11 +133,11 @@ export default defineComponent({
     };
     const toggleLoop = () => {
       data.speedControl = false;
-      if (!videoItem.value) return;
+      if (!videoRef.value) return;
       if (data.loop) {
-        videoItem.value.loop(false);
+        videoRef.value.loop(false);
       } else {
-        videoItem.value.loop(true);
+        videoRef.value.loop(true);
       }
       data.loop = !data.loop;
     };
@@ -155,7 +155,7 @@ export default defineComponent({
       data.currentTime = val;
       clearTimeout(data.timer);
       data.timer = setTimeout(() => {
-        videoItem.value.currentTime(val);
+        videoRef.value.currentTime = val;
         data.timer = null;
       }, 300);
     };
@@ -256,8 +256,8 @@ export default defineComponent({
       }
       clearTimeout(videoTimer);
       nextTick(() => {
-        videoItem.value?.play().catch((err: any) => {
-          // console.log('🚀 ~ err:', err)
+        videoRef.value?.play().catch((err: any) => {
+          console.log('🚀 ~ err:', err)
           videoTimer = setTimeout(() => {
             if (err?.message?.includes('play()')) {
               emit('play');
@@ -289,12 +289,13 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      videoItem.value = TCPlayer(videoID, {
-        appID: '',
-        controls: false,
-        autoplay: true
-      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
-      __initVideo();
+      // videoItem.value = TCPlayer(videoID, {
+      //   appID: '',
+      //   controls: false,
+      //   autoplay: true
+      // }); // player-container-id 为播放器容器 ID，必须与 html 中一致
+      // __initVideo();
+      console.log(item.value, 'item')
 
       document.getElementById(speedBtnId)?.addEventListener('click', e => {
         e.stopPropagation();
@@ -311,10 +312,10 @@ export default defineComponent({
     watch(
       () => props.item,
       () => {
-        videoItem.value?.currentTime(0);
+        videoRef.value.currentTime = 0
         setTimeout(() => {
-          videoItem.value?.pause();
-          __initVideo();
+            // videoRef.value.pause()
+            item.value = props.item
         }, 60);
       }
     );
@@ -350,7 +351,8 @@ export default defineComponent({
     };
 
     const getPlyrRef = () => {
-      return videoItem.value;
+      // return videoItem.value;
+      return videoRef.value;
     };
 
     expose({
@@ -377,12 +379,53 @@ export default defineComponent({
         }}>
         <video
           style={{ width: '100%', height: '100%' }}
-          src={item.value.content}
+          src={item.value?.content}
           ref={videoRef}
-          id={videoID}
           preload="auto"
           playsinline
-          webkit-playsinline></video>
+          autoplay
+          webkit-playsinline
+          onLoadedmetadata={() => {
+            // 获取时长
+            data.duration = videoRef.value.duration;
+            console.log(item.value, videoRef.value, props.isActive)
+            if (item.value.autoPlay && videoRef.value) {
+              // videoItem.value?.play()
+              nextTick(() => {
+                videoRef.value.currentTime = 0;
+                nextTick(handlePlayVideo);
+              });
+            }
+            emit('loadedmetadata', videoRef.value);
+          }}
+          onTimeupdate={() => {
+            // if (data.timer) return;
+            data.currentTime = videoRef.value.currentTime;
+            // emit('timeupdate');
+          }}
+          onEnded={() => {
+            changePlayBtn('pause');
+            emit('ended');
+          }}
+          onPause={() => {
+            data.playState = 'pause';
+          changePlayBtn('pause');
+          emit('togglePlay', true);
+          emit('pause');
+          }}
+          onSeeked={() => { emit('seeked');}}
+          onSeeking={() => { emit('seeking');}}
+          onWaiting={() => {emit('waiting');}}
+          onPlay={() => {
+            changePlayBtn('play');
+            if (videoRef.value) {
+              videoRef.value.muted = false;
+              videoRef.value.volume = 1;
+            }
+            emit('togglePlay', videoRef.value?.paused);
+            emit('play');
+          }}
+          ></video>
         <div class={styles.videoSection}></div>
 
         <div
@@ -390,9 +433,6 @@ export default defineComponent({
           onClick={(e: Event) => {
             e.stopPropagation();
           }}
-          // onTouchmove={(e: TouchEvent) => {
-          //   emit('close')
-          // }}
         >
           <div class={styles.time}>
             <div>{getSecondRPM(data.currentTime)}</div>/