Dplayer在vue中的使用

html部分

<template>
    <div ref="dplayer" class="dplayer"></div>
</template>

script部分

<script setup>
import { onMounted, onUnmounted, ref, defineProps } from 'vue';
import Hls from "hls.js";
import Flv from "flv.js";
import shaka from 'shaka-player';
import DPlayer from 'dplayer';

const dplayer = ref(null);
let dp = null;
const props = defineProps({
    autoplay: {
        type: Boolean,
        default: false
    },
    theme: {
        type: String,
        default: '#b7daff'
    },
    loop: {
        type: Boolean,
        default: false
    },
    lang: {
        type: String,
        default: 'zh-cn'
    },
    preload: {
        type: String,
        default: 'auto'
    },
    volume: {
        type: Number,
        default: 0.7
    },
    playbackSpeed: {
        type: Array,
        default: [0.5, 0.75, 1, 1.25, 1.5, 2]
    },
    hotkey: {
        type: Boolean,
        default: false
    },
    url: {
        type: String,
        default: ''
    },
    pic: {
        type: String
    },
    type: {
        type: String,
        default: 'auto'
    }
})
onMounted(() => {
    initPlayer()
});
function initPlayer() {
    dp = new DPlayer({
        container: dplayer.value,
        autoplay: props.autoplay,//视频自动播放 默认值false
        theme: props.theme,//主题色 默认值'#b7daff'
        loop: props.loop,//视频循环播放 默认值false
        hotkey: props.hotkey,//开启热键，支持快进、快退、音量控制、播放暂停
        lang: props.lang,//语言 默认值'zh-cn',可选值: 'en', 'zh-cn', 'zh-tw' 
        preload: props.preload,// 视频预加载 默认值:'auto',可选值: 'none', 'metadata', 'auto'
        volume: props.volume,//默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        playbackSpeed: props.playbackSpeed,//可选的播放速率，可以设置成自定义的数组
        video: {
            url: props.url,//视频链接
            pic: props.pic,//视频封面
            type: props.type,//默认值'auto' 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
        },
    });
    //判断浏览器是否支持hls流
    if (Hls.isSupported() && props.type == 'hls') {
        const hls = new Hls();
        hls.loadSource(props.url);//开始加载
        hls.attachMedia(dp.video);//附加mse
    }
    // 判断浏览器是否支持flv视频格式
    if (Flv.isSupported() && props.type == 'flv') {
        const flvPlayer = Flv.createPlayer({
            type: 'flv',
            url: props.url,
        });
        flvPlayer.attachMediaElement(dp.video);
        flvPlayer.load()
    }
    // 判断mpd格式视频
    if(props.type == 'dash'){
        const playerShaka = new shaka.Player();
        playerShaka.attach(dp.video)
        playerShaka.load(props.url);
    }
}
onUnmounted(() => {
    if (dp) {
        dp.destroy();
    }
});
</script>

emmm没有webtorrent的,写了没磁力供尝试就没弄。