feat: test

src/hooks/use-play.ts

@@ -124,13 +124,22 @@ export function useHlsPlay() {
   );
 
   function startHlsPlay(data: { hlsurl: string }) {
+    console.error('startHlsPlay');
     destroyHls();
     const videoEl = document.createElement('video');
     videoEl.autoplay = true;
-    videoEl.muted = appStore.muted;
+    videoEl.muted = true;
+    // videoEl.muted = appStore.muted;
     videoEl.playsInline = true;
     videoEl.setAttribute('webkit-playsinline', 'true');
     hlsVideoEl.value = videoEl;
+    videoEl.onplay = () => {
+      console.log('onplayonplay');
+    };
+    videoEl.onplaying = () => {
+      console.log('onplayingonplaying');
+    };
+    document.body.appendChild(videoEl);
     return new Promise<{ width: number; height: number }>((resolve) => {
       hlsPlayer.value = videoJs(
         videoEl,
@@ -143,7 +152,7 @@ export function useHlsPlay() {
           ],
         },
         function () {
-          console.log('开始播放hls');
+          console.log('开始播放hls', data.hlsurl);
           hlsPlayer.value?.play();
           hlsPlayer.value?.on('play', () => {
             console.log('hls-play');

src/views/h5/room/index.vue

@@ -1,5 +1,24 @@
 <template>
   <div class="h5-room-wrap">
+    <video
+      width="400"
+      height="400"
+      src="http://localhost:5001/livestream/roomId___4.m3u8"
+      controls
+    ></video>
+    <br />
+    <br />
+    <video
+      ref="testRef"
+      autoplay
+      webkit-playsinline="true"
+      playsinline
+      x-webkit-airplay="allow"
+      x5-video-player-type="h5"
+      x5-video-player-fullscreen="true"
+      x5-video-orientation="portraint"
+      muted
+    ></video>
     <div class="head">
       <div class="left">
         <div
@@ -114,6 +133,7 @@ const route = useRoute();
 
 const bottomRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
+const testRef = ref<HTMLVideoElement>();
 const canvasRef = ref<HTMLVideoElement>();
 const localVideoRef = ref<HTMLVideoElement[]>([]);
 const showPlayBtn = ref(false);
@@ -160,6 +180,12 @@ const {
 
 const liveRoomInfo = ref<ILiveRoom>();
 
+watch(
+  () => autoplayVal.value,
+  (v) => {
+    console.log(v, 1111111);
+  }
+);
 watch(
   () => damuList.value.length,
   () => {
@@ -182,7 +208,6 @@ async function getLiveRoomInfo() {
         autoplayVal.value = true;
         showPlayBtn.value = false;
       } else {
-        autoplayVal.value = false;
         showPlayBtn.value = true;
       }
       initPull(autoplayVal.value);
@@ -201,11 +226,17 @@ async function startPull() {
     hlsurl: liveRoomInfo.value!.hls_url!,
   });
   videoToCanvas({
-    videoEl: hlsVideoEl.value!,
+    videoEl: testRef.value!,
     targetEl: canvasRef.value!,
     width,
     height,
   });
+  // videoToCanvas({
+  //   videoEl: hlsVideoEl.value!,
+  //   targetEl: canvasRef.value!,
+  //   width,
+  //   height,
+  // });
   videoLoading.value = false;
 }
 

src/views/pull/index.vue

@@ -190,6 +190,12 @@
             class="ipt"
             @keydown="keydownDanmu"
           ></textarea>
+          <div
+            class="btn"
+            @click="startTestPlay"
+          >
+            播放
+          </div>
           <div
             class="btn"
             @click="sendDanmu"
@@ -246,6 +252,7 @@ const {
   startGetDisplayMedia,
   addTrack,
   addVideo,
+  autoplayVal,
   videoLoading,
   balance,
   roomName,
@@ -315,6 +322,11 @@ watch(
     }, 0);
   }
 );
+function startTestPlay() {
+  autoplayVal.value = true;
+  console.log('1111');
+  initPull(true);
+}
 
 onMounted(() => {
   getGoodsList();
@@ -335,9 +347,9 @@ onMounted(() => {
     containerRef.value.style.height = `${res}px`;
   }
   if (route.query.liveType === liveTypeEnum.srsHlsPull) {
-    initPull();
+    initPull(false);
   } else {
-    initPull();
+    initPull(false);
   }
 });
 </script>