前端视频播放组件 vue-dplayer

1.安装

cnpm install vue-dplayer -S

2.在main.js中导入

import VueDPlayer from 'vue-dplayer';
import 'vue-dplayer/dist/vue-dplayer.css';

Vue.use(VueDPlayer);

3.使用vue-dplayer组件：

<template>
  <div class='home'>
    <d-player ref="player" :options="options"></d-player>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        options: {
          video: {
            url: '../../static/videos/fengjing.mkv'
          },
          contextmenu: [
            {}
          ]
        }
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
</style>

4.options参数

参考dplayer的官方文档：http://dplayer.js.org/guide.html#options。参照options章节，填写参数进行自定义播放器。

<template>
  <div class='home'>
    <d-player ref="player" :options="options"></d-player>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        options: {
          theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
          loop: false,  // 是否自动循环
          lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
          screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
          hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
          preload: 'auto',  // 自动预加载
          volume: 0.7,  // 初始化音量
          logo: '../../static/images/1.jpg',  // 在视频左脚上打一个logo
          video: {
            url: '../../static/videos/fengjing.mkv', // 播放视频的路径
            quality: [  // 设置多个质量的视频
              {
                name: 'HD',
                url: '../../static/videos/fengjing.mkv',
                type: 'auto',  // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
              },
              {
                name: 'SD',
                url: '../../static/videos/fengjing.mkv',
                type: 'auto',
              }
            ],
            defaultQuality: 0,  // 默认是HD
            pic: '../../static/images/2.jpg',  // 视频封面图片
            thumbnails: '../../static/images/3.jpg'  // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
          },
          subtitle: {
            url: 'http://www.baidu.com',
            fontSize: '20px',
            bottom: '40px',
          },
          danmaku: {   // 弹幕
            id: '9E2E3368B56CDBB4',
            api: 'https://api.prprpr.me/dplayer/',
            token: 'tokendemo',
            maximum: 1000,
            addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
            user: 'DIYgod',
            bottom: '15%',
            unlimited: true
          },
          contextmenu: [  // 右键菜单
            {
              text: 'custom1',
              link: 'https://www.bilibili.com'
            },
            {
              text: 'custom2',
              click: (player) => {
                console.log(player);
              }
            }
          ],
          highlight: [  // 进度条时间点高亮
            {
              text: '10M',
              time: 600,
            },
            {
              text: '20M',
              time: 1200,
            },
          ],
        }
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
</style>

 DPlayer文档

API函数参考：http://dplayer.js.org/guide.html#api

事件绑定参考：http://dplayer.js.org/guide.html#event-binding