安装引入 Dplayer组件
npm install -s Dplayer
-or
yarn add Dplayer
引入Hls模块支持M3u8格式视频
npm install hls.js -s
以下直接提上vue3.0的代码,具体自己看吧
<template>
<div class="p-4">
<div id="dplayer"></div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import Hls from 'hls.js';
import DPlayer from 'dplayer';
export default defineComponent({
setup() {
let dp: any;
// 初始化播放器
const initPlayer = () => {
dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: false,
theme: '#0093ff',
loop: true,
lang: 'zh-cn',
screenshot: true,
hotkey: true,