vue使用vue-dplayer播放m3u8视频

---

前言

后台提供了一个视频播放路径，为切片完的m3u8类型的，在前端播放，网上参照了几个教程，这里总结一下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装插件

有的教程只安装了第一个，导致视频无法播放，前端控制台报关于Hls的错

npm install vue-dplayer -S
npm install hls.js -S

二、使用步骤

1.main.js全局引入

window.Hls = require('hls.js')
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
Vue.use(VueDPlayer)

2.页面引入

<d-player ref="player" :options="videoPlay.dplayerOptions"></d-player>

3.属性配置

我在return里定义了一下，具体的配置内容在点击视频文件时配置

return {
	videoPlay: {
	  dplayerOptions: {}
	}
}

点击完视频文件的方法：

// 针对部分options属性进行配置
this.videoPlay.dplayerOptions= {
  title:XXXX,//这里是自己的文件名
  theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
  loop: false,  // 是否自动循环
  lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
  screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
  hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
  preload: 'auto',  // 自动预加载
  volume: 0.7,  // 初始化音量
  logo: require('@/assets/logo.png'),  // 在视频左脚上打一个logo
  video: {
    url: XXXX, // 自己的播放视频的路径URl
    quality: [  // 设置多个质量的视频
      {
        name: 'HD',
        url: XXXX, // 自己的播放视频的路径URl
        type: 'auto',  // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
      },
      {
         name: 'SD',
         url: XXXX, // 自己的播放视频的路径URl
         type: 'auto',
       }
    ],
    defaultQuality: 0,  // 默认是HD
  },
  highlight: [  // 进度条时间点高亮
    {
      text: '10M',
      time: 600,
    },
    {
      text: '20M',
      time: 1200,
    },
  ],
}

我在使用过程中把一些用不到的功能给去掉了，如：弹幕、右键菜单、视频封面、进度条的缩略图