Quick Implement FullScreen and other controls on HLS.JS with Plyr.JS

使用 Plyr.JS 快速的幫HTML5的 video tag支援更多功能並輕鬆客製化介面

先前有介紹過 HLS.JS 這個套件來協助瀏覽器支援HTML5的video tag 能正常播放HLS格式的影片，今天要來介紹另外一個樣式漂亮且功能強大的套件

Plyr.JS Introduction

Plyr.JS是一個輕巧漂亮的HTML5播放器的 video 標籤，這讓我們可以簡單輕鬆的將套件接到目前的網頁中．而它本身也將樣式呈現都放到自己的css檔案內方便我們做調整跟客製化．

以下節錄官方列出來的功能：

Features:

Accessible - full support for VTT captions and screen readers
Lightweight - under 10KB minified and gzipped
Customisable - make the player look how you want with the markup you want
Semantic - uses the right elements. for volume andfor progress and well,
Responsive - works with any screen size
HTML Video & Audio - support for both formats
Embedded Video - support for YouTube and Vimeo video playback
Streaming - support for hls.js, Shaka and dash.js streaming playback
API - toggle playback, volume, seeking, and more
Events - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
Fullscreen - supports native fullscreen with fallback to “full window” modes
Shortcuts - supports keyboard shortcuts
i18n support - support for internationalization of controls
No dependencies - written in “vanilla” JavaScript, no jQuery required
SASS and LESS - to include in your build processes
Works with Bootstrap.

而這邊我們也提到可以結合HLS.JS讓我們的瀏覽器如：Desktop的Chrome 播放HLS格式的影片並套用此播放器的其他功能．

Pyer.JS + HLS.JS

var video = document.getElementById('player');
 
if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('http://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    });
}
 
plyr.setup(video);