本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^
今まで、HLSのPlayerは、Video.jsを利用していました。
有名どころでいくと、flowplayer や、jwpalyerがあります。ただ、こちらのPlayerは有料なので無料で良いものがないか探してみました。
Shaka Player
名前が宗教チックですが、Googleが提供しているOpenSouce Playerとの事で機体が持てます。
Chrome,Firefox,Edge,IE,Operaに対応しています。
HLSとしては、VODでもLiveでも配信可能です。
チュートリアル
https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html
Debianへのインストール方法
sudo apt-get update
sudo apt-get install git python2.7 default-jre-headless npm
NPNのnode情報を最新版に更新します。
# Upgrade npm and node to the latest versions
sudo npm install -g n
sudo n stable
sudo npm install -g npm
Shaka Playerのソースコードを取得します。
git clone https://github.com/google/shaka-player.git
cd shaka-player
ライブラリをコンパイルします
python build/all.py
ドキュメントを作成します
python build/docs.py
コンパイルした成果物を配信できる位置にコピー
shaka-player/dist# mkdir /usr/local/nginx/html/live/shaka
shaka-player/dist# cp shaka-player.compiled.js /usr/local/nginx/html/live/shaka/
基本的な使い方
https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html
// myapp.js
var manifestUri = ‘//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd’;
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error(‘Browser not supported!’);
}
}
function initPlayer() {
// Create a Player instance.
var video = document.getElementById(‘video’);
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener(‘error’, onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log(‘The video has now been loaded!’);
}).catch(onError); // onError is executed if the asynchronous load fails.
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error(‘Error code’, error.code, ‘object’, error);
}
document.addEventListener(‘DOMContentLoaded’, initApp);
注意
１．Chromeでは再生できない
再生する方法もあるみたいだけど、上記だけではダメらしいです。Edgeはネイティブでtsファイルを再生できるので、Edgeで試すと大丈夫でした。Chromeで再生できるところまでもっていくにはちょっと骨が折れそうなので断念しました。
２．.m3u8ファイルができる（tsファイルができる）フォルダに、リファラーで制限をかけていると、Edgeでも再生できなくなる。この事から、shaka playerのm3u8再生は、ブラウザネイティブで直接そのm3u8を見に行くような仕様になっているのではないかと思います。
Nativeで、tsファイルの再生に対応しているブラウザでのみ利用可能
Egdgeか、ChromeCastだそうです。Chromeでは利用できない
https://github.com/google/shaka-player/issues/851
https://github.com/google/shaka-player/issues/1262
