框架初始化

src/components/VideoPlay.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="videoPlay">
+    <video
+      ref="m3u8_video"
+      class="video-js vjs-default-skin vjs-big-play-centered"
+      controls
+    >
+      <source :src="videoSrc" />
+    </video>
+  </div>
+</template>
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import videojs from 'video.js'
+import 'video.js/dist/video-js.css'
+const props = defineProps({
+  videoSrc: String,
+  autoPlay: Boolean,
+})
+
+const m3u8_video = ref()
+let player
+const initPlay = async () => {
+  videojs.addLanguage('zh-CN', zh)
+  await nextTick()
+  const options = {
+    muted: true,
+    controls: true,
+    autoplay: true,
+    loop: true,
+    language: 'zh-CN',
+    techOrder: ['html5'],
+  }
+  player = videojs(m3u8_video.value, options, () => {
+    videojs.log('播放器已经准备好了!')
+    if (props.autoPlay && props.videoSrc) {
+      player.play()
+    }
+    player.on('ended', () => {
+      videojs.log('播放结束了!')
+    })
+    player.on('error', () => {
+      videojs.log('播放器解析出错!')
+    })
+  })
+}
+onMounted(() => {
+  initPlay()
+})
+//直接改变路径测试
+watch(
+  () => props.videoSrc,
+  () => {
+    player.pause()
+    player.src(props.videoSrc)
+    player.load()
+    if (props.videoSrc) {
+      player.play()
+    }
+  }
+)
+onBeforeUnmount(() => {
+  player?.dispose()
+})
+</script>
+<style lang="scss" scoped>
+.videoPlay {
+  width: 100%;
+  height: 100%;
+  .video-js {
+    height: 100%;
+    width: 100%;
+    object-fit: fill;
+  }
+}
+
+:deep(.vjs-tech) {
+  object-fit: fill;
+}
+</style>