iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0

今天來介紹 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

這裡列出幾個常見方法

方法 描述
.play() 播放
.pause() 暫停
.toggle() 在暫停與播放間切換
.danmaku.show() 顯示彈幕
.danmaku.hide() 隱藏彈幕
.destroy() 清除播放器物件

其他 Methods 方法說明見此
 
 
 
 
 
 

參考

DPlayer 官方github
DPlayer 官方文件


上一篇
Day21 plyr 播放器
下一篇
Day23 西瓜播放器
系列文
前端影片與直播筆記30

尚未有邦友留言

立即登入留言