vue中安装和使用Dplayer视频播放器

1、下载

npm下载

npm install dplayer - s
npm i hls.js -s

yarn下载

yarn add dplayer 
yarn add hls.js

2、使用 

<template>
    <div class="box">
        <el-card>
            <div id="dplayer" style="width:600px;height: 400px"></div>
        </el-card>
    </div>
</template>

<script>
import DPlayer from 'dplayer';
import Hls from 'hls.js';
export default {
    data() {
        return {
            dp: {}
        };
    },
    methods: {},
    mounted() {
        this.dp = new DPlayer({
            //播放器的一些参数
            container: document.getElementById('dplayer'),
            video: {
                url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', //视频地址
                type: 'customHls',
                customType: {
                    customHls: function (video, player) {
                        const hls = new Hls(); //实例化Hls  用于解析m3u8
                        hls.loadSource(video.src);
                        hls.attachMedia(video);
                    }
                }
            },
            autoplay: false, //是否自动播放
            theme: '#FADFA3', //主题色
            loop: true, //视频是否循环播放
            lang: 'zh-cn',
            screenshot: false, //是否开启截图
            hotkey: true, //是否开启热键
            preload: 'auto', //视频是否预加载
            volume: 0.7, //默认音量
            mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        });
    }
};
</script>

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

效果：

  

dplayer的功能非常的强大，官网有详细的api，有兴趣的攻城狮可以去研究研究。

DPlayer官网地址：DPlayer

友情提醒：npm对DPlayer做了封装，所以如果是在vue工程中，我们可以使用vue-dplayer。它可以使用所有DPlayer API。具体使用和安装步骤，官网给了非常清晰的例子。
vue-dplayer官网链接：vue-dplayer - npm