增加播放m3u8格式

src/components/detail/imageWatch.vue

@@ -5,9 +5,9 @@
                 <el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index" indicator-position="none" ref="carousel" @change="carouselChange">
                     <el-carousel-item v-for="(item, i) in list" :key="i">
                         <div class="dis-f jus-x al-item" v-if="item">
-                            <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'">
-                                <video v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video>
-                            </div>
+                            <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center;">
+                                <video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box>
+                                <!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->                            </div>
                             <div class="img-box dis-f jus-x" v-else>
                                 <img v-if="i >= imageTab - 1 && i <= imageTab + 1" :src="(item && item.url) || item['imageurl'] || item['image']" class="img" alt="" />
                             </div>
@@ -38,7 +38,11 @@
 </template>
 
 <script setup>
+import { set } from "nprogress"
+
 import { reactive, onMounted, ref, defineProps, watchEffect, watch } from "vue"
+import videoBox from "@/components/public/video-box.vue"
+
 // type 的类型代表  attachment 图片  videos  视频   lives 直播
 const props = defineProps({
     //url:展示图   thumbnail:缩略图

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>