vue3+ts使用DPlayer播放视频

下载依赖包

npm install dplayer --save

import引入

import DPlayer from 'dplayer';

使用

dom结构
<template>
	<div class="vedio" id="PlayVideo"></div>
</template>
const initPlayer = () => {
	// 播放视频
	state.dp = new DPlayer({
		// live: true, // 是否为直播
        container: document.getElementById("PlayVideo"),
        autoplay: true, //是否自动播放
        theme: "#0093ff", //主题色
        loop: true, //视频是否循环播放
        lang: "zh-cn",
		playbackSpeed: [1, 2, 4], // 可自定义倍速
        screenshot: true, //是否开启截图
        hotkey: true, //是否开启热键
        preload: "auto", //视频是否预加载
        volume: 0.7, //默认音量
        mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        video: {
          url: state.ruleForm.filepath, //播放视频地址
          type: "auto",
        },
      });
}

注意：还可用于直播，且还有别的属性，可在官网查看了解
官网: link