今天來介紹 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 官方文件