前端視頻播放組件 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