前端视频播放组件 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组件：

 1 <template>
 2   <div class=\'home\'>
 3     <d-player ref="player" :options="options"></d-player>
 4   </div>
 5 </template>
 6 
 7 <script>
 8   export default {
 9     name: \'Home\',
10     data() {
11       return {
12         options: {
13           video: {
14             url: \'../../static/videos/fengjing.mkv\'
15           },
16           contextmenu: [
17             {}
18           ]
19         }
20       }
21     }
22   }
23 </script>
24 <style scoped>
25   .home {
26     width: 1000px;
27     margin: 0 auto;
28     text-align: center;
29   }
30 </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