今天來介紹 plyr 播放器

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

  1. Github 12367 顆星星
  2. 可透過 Plugin 支援多種格式、協議影片 ( MP4、FLV、HLS、webm、DASH..etc )
  3. 可在 HTML5、Flash 間切換
  4. 支援播放 YouTube 與 Vimeo 影片
  5. 極為輕量，plyr.min.js 僅有 95.6 KB
  6. 有 vue-plyr 與 react-plyr 版可使用

安裝、引入 plyr

CDN

<link rel="stylesheet" type="text/css" href="https://unpkg.com/plyr@3/dist/plyr.css">

<script src="https://cdn.plyr.io/3.4.6/plyr.js" type="text/javascript" ></script>

NPM

npm install plyr

初始化 plyr 並與 綁定播放器

plyr播放器的建立方式很簡單
HTML

  <video controls poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
  </video>

JS

const player = new Plyr('#player');

或

const player = new Plyr(document.getElementById('player'));

至此 plyr 便建立完成

plyr API 與 Options

見此

參考

plyr 官方github
React-plyr
Vue-plyr