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


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

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

plyr

Plyr.JS Introduction

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

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

Features:

而這邊我們也提到可以結合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);

呈現上與預設的HLS.JS的比較如下:

difference.png

有興趣的可以參考這個範例

至於為什麼還要特別用Plyr.JS呢,當你想要的播放功能(如 全螢幕或是自動播放等功能在當前瀏覽器不支援時)或是樣式需要做些調整或是客製化的時候,非常建議大家在前人的輪子上面製造車子!


作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
  目錄