增加播放m3u8格式

2024-08-26 16:03:26 +08:00
parent ba36f0d018
commit 206f889e51
22 changed files with 849 additions and 21 deletions
--- a/src/components/public/video-box.vue
+++ b/src/components/public/video-box.vue
@@ -0,0 +1,82 @@
+<template>
+    <video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></video>
+    <video v-else :id="'video' + val" style="width: 800px;" class="video video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls :poster="poster">
+        <source type="application/x-mpegURL" />
+        <source type="video/mp4" />
+        <source type="video/webm" />
+        <source type="video/ogg" />
+    </video>
+</template>
+<script setup>
+import videojs from "video.js"
+import "video.js/dist/video-js.css"
+import { reactive, onMounted, ref, defineProps, watchEffect, watch, onUnmounted, nextTick } from "vue"
+
+const props = defineProps({
+    src: {
+        type: String,
+        default: "",
+    },
+    val: {
+        type: String,
+        default: "",
+    },
+    imageTab: {
+        type: Number,
+        default: "",
+    },
+})
+
+watch(
+    () => props.imageTab,
+    newVal => {
+        if (newVal != props.val) {
+            if (player.value != null) {
+                player.value.pause() // dispose()会直接删除Dom元素
+            }
+        }
+    }
+)
+
+const player = ref(null)
+let ism3u8 = ref(false) // 是否是 m3u8 格式
+
+onMounted(() => {
+    if (props.src.indexOf("m3u8") == -1) {
+        // console.log("mp4")
+        return
+    }
+    ism3u8.value = true
+    nextTick(() => {
+        player.value = videojs("video" + props.val, {
+            preload: "metadata", // 首次是否需要轻求资源，none：不轻求：metadata只请求必要资源
+            bigPlayButton: true,
+            textTrackDisplay: false,
+            posterImage: true,
+            errorDisplay: false,
+            controlBar: {
+                captionsButton: false,
+                chaptersButton: false,
+                subtitlesButton: false,
+                liveDisplay: false,
+                playbackRateMenuButton: false,
+            },
+            sources: [
+                {
+                    src: props.src,
+                    stype: "application/x-mpegURL",
+                },
+            ],
+        })
+    })
+})
+
+onUnmounted(() => {
+    if (player.value != null) {
+        player.value.dispose() // dispose()会直接删除Dom元素
+    }
+})
+</script>
+<style lang="less" scoped>
+
+</style>