今天來介紹 clappr 播放器

clappr 是一款開源播放器，並可透過 Plugin 支援RTMP、DASH 與 FLV ，這個播放器的特色是：

1. Github 4419 顆星星
2. Plugin 豐富
3. 可透過 Plugin 支援多種格式、協議影片 ( MP4、FLV、HLS、webm、DASH..etc )
4. 可在 HTML5、Flash 間切換
5. 文件齊全

安裝、引入 clappr

CDN

<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js" type="text/javascript" ></script>

建立 clappr 物件

HTML

<div id="player"></div>

JS

const player = new Clappr.Player({
  source: "http://www.html5videoplayer.net/videos/toystory.mp4", 
  parentId: "#player"
});

說明:
建立Clappr播放器的方式很簡單，new 一個新 Clappr.Player物件 ，在 new 的時候傳入一個物件，可以替該物件帶入其他 config 屬性參數，這裡以 source 與 parentId 為例。

parentId屬性值為HTML欲綁定 <Tag> 的 id，如果不傳入parentId屬性，
也可在new Clappr.Player()下面用

Clappr物件.attachTo( 欲綁定DOM節點 );

的寫法。

config 有一些參數可選：

事件 Events

clappr 的事件 API 也很簡單，可以在new Clappr.Player()建立物件時，在裏頭帶入 events 屬性，其值為一個物件，該物件中能帶入監聽事件觸發時執行的 callback 函式。

const player = new Clappr.Player({
  events: {
    onReady: () => { //...做某件事 }, 
    onPause: () => { //...做某件事 }
  }
})

這裡列出幾個常用的 Event 事件

方法 Methods

clappr 也提供了不少方法，這裡列出幾個常用的：

　
　
　
　
　
　
　
參考
clappr Github
clappr Events API
clappr Plugins