|
カテゴリ:カテゴリ未分類
今まで、HLSのPlayerは、Video.jsを利用していました。
有名どころでいくと、flowplayer や、jwpalyerがあります。ただ、こちらのPlayerは有料なので無料で良いものがないか探してみました。 Shaka Player 名前が宗教チックですが、Googleが提供しているOpenSouce Playerとの事で機体が持てます。 https://github.com/google/shaka-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 <!-- Shaka Player compiled library: --> <!-- Your application source: --> // 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); 注意 1.Chromeでは再生できない 再生する方法もあるみたいだけど、上記だけではダメらしいです。Edgeはネイティブでtsファイルを再生できるので、Edgeで試すと大丈夫でした。Chromeで再生できるところまでもっていくにはちょっと骨が折れそうなので断念しました。 2..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 お気に入りの記事を「いいね!」で応援しよう
Last updated
Feb 15, 2018 02:23:43 PM
コメント(0) | コメントを書く |