Day22 Dplayer 播放器

今天來介紹 Dplayer 播放器

Dplayer 是由中國開發者製作的播放器，最初只是作者的畢業專題作品，到了現在 Dplayer 已成為一個功能成熟強大的播放器。

Dplayer 播放器的特色有：

1. Github 4075 顆星星
2. 彈幕功能
3. Plugin 豐富
4. 可透過 MSE 媒體源擴展 支援多格式、協議影片
5. 文件齊全(中文)

安裝、引入 Dplayer

CDN

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dplayer/1.25.0/DPlayer.min.css">

JS

<script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>

NPM

npm install dplayer

快速入門：建立 Dplayer 播放器

HTML

<div id="dplayer"></div>

JS

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'http://clappr.io/highline.mp4'
    }
});

至此便建立好 Dplayer 播放器

建立播放器的參數與說明見此

事件 Events

Dplayer 的事件監聽很簡單

播放器物件.on(事件名, 之後執行的回呼函式)

例如

dp.on("pause", ()=>{
  console.log("暫停")
})

事件名與其他參數說明見此

方法 Methods API

這裡列出幾個常見方法

其他 Methods 方法說明見此

參考

DPlayer 官方github
DPlayer 官方文件