feat: init commit

src/components/videoPlayer.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="videoRef" class="dplayer-container"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import DPlayer from 'dplayer';
+import Hls from 'hls.js';
+
+const videoRef = ref(null);
+
+const props = defineProps({
+  autoplay: { type: Boolean, default: false },
+  videoUrl: { type: String, required: true },
+  danmaku: { type: Object, default: () => ({}) }
+});
+
+onMounted(() => {
+  const playerOptions = {
+    container: videoRef.value,
+    autoplay: props.autoplay,
+    video: {
+      url: `/proxy?url=${encodeURIComponent(props.videoUrl)}`,
+      type: 'customHls',
+      customType: {
+        customHls: function (video, player) {
+          if (Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource(video.src);
+            hls.attachMedia(video);
+            hls.config.maxBufferLength = 60; // 设置最大缓冲时间为60秒
+            hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+              video.play();
+            });
+          }
+        }
+      }
+    },
+    danmaku: props.danmaku
+
+
+  };
+
+  console.log(`/proxy?url=${encodeURIComponent(props.videoUrl)}`)
+  const player = new DPlayer(playerOptions);
+
+  player.on('play', () => {
+    console.log("播放...")
+  })
+  player.on('pause', () => {
+    console.log("暂停...")
+  })
+  player.on('ended', () => {
+    console.log("结束...")
+  })
+  player.on('error', () => {
+    console.log("出错...")
+  })
+
+  watch(() => props.videoUrl, (newUrl) => {
+    if (player) {
+      console.log("切换视频...")
+      player.switchVideo({
+        url: `/proxy?url=${encodeURIComponent(newUrl)}`,
+        type: 'customHls',
+        customType: {
+          customHls: function (video, player) {
+            if (Hls.isSupported()) {
+              const hls = new Hls();
+              hls.loadSource(video.src);
+              hls.attachMedia(video);
+              hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                video.play();
+              });
+            }
+          }
+        }
+      })
+    }
+  }
+  )
+
+  // 销毁时清理播放器
+  onBeforeUnmount(() => {
+    player.destroy();
+  });
+});
+</script>
+
+<style scoped>
+.dplayer-container {
+  width: 100%;
+  height: 100%;
+}
+</style>