111111

qinshanmaoli

于 2024-09-28 01:08:19 发布

阅读量97

点赞数 3

文章标签： java

本文链接：https://blog.csdn.net/sunqinshan/article/details/142605294

版权

<template>
  <div :id="props.id" />
</template>

<script setup lang="ts">
import DPlayer from "dplayer"
import flvjs from "flv.js"
import Hls from "hls.js"
import { onBeforeUnmount, onMounted } from "vue"
const props = defineProps({
  video: {
    type: String, //视频地址
    required: true
  },
  id: {
    type: String, //id
    required: true
  }
})
let dp: DPlayer
onMounted(() => {
  dp = new DPlayer({
    container: document.getElementById(props.id),
    live: true,
    video: {
      url: props.video,
      type: "customFlv", // 自动检测类型
      customType: {
        //自定义播放类型文件《type需要设置为'customHls'》
        customHls: function (video) {
          const hls = new Hls()
          hls.loadSource(video.src)
          hls.attachMedia(video)
        },
        //自定义播放类型文件《type需要设置为'customFlv'》
        customFlv: function (video) {
          const flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: video.src
          })
          flvPlayer.attachMediaElement(video)
          flvPlayer.load()
        }
      }
    }
  })
})
onBeforeUnmount(() => {
  dp.destroy() // 关闭DPlayer
})
</script>

<style lang="scss" scoped></style>