vue.js视频播放器组件-vue-dplayer-02

安装

npm install vue-dplayer -S

导入使用

//在main.js中导入：
import VueDPlayer from 'vue-dplayer';
import 'vue-dplayer/dist/vue-dplayer.css';

Vue.use(VueDPlayer);

使用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>

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>

API函数及事件绑定

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

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