サンプルデモ
plyrを使って、ビデオとミュージックを再生するサンプルデモです。プレーヤーは自動的に、親要素の横幅いっぱいに調整され、ウィンドウ幅を縮めるとそれに応じて狭まるレスポンシブに対応しています。また、各ボタンのUIが小気味良いアニメーションになっています。
ビデオや音楽を再生、コントロールできるHTML5のメディアプレーヤー。スタイリッシュなコントロールUIをお手軽に実装できるJavaScriptライブラリ、Plyrの使い方を紹介します。スマホに最適化したレスポンシブ対応で、jQueryも必要ありません。
plyrを使って、ビデオとミュージックを再生するサンプルデモです。プレーヤーは自動的に、親要素の横幅いっぱいに調整され、ウィンドウ幅を縮めるとそれに応じて狭まるレスポンシブに対応しています。また、各ボタンのUIが小気味良いアニメーションになっています。
Plyrは、GitHubで入手することができます。まずはライブラリをダウンロードして下さい。
ライブラリファイル(plyr-master.zip)をダウンロードし、ZIPを解凍すると、色々とファイルが含まれています。最低限のプレーヤーを実装するために必要なのは、下記の4つのファイルのみです。これらを同一のフォルダに入れて下さいね。
plyr-master.zip
ちょっと癖のあるライブラリなので、コーヒーでも飲みながら、ゆっくり、確実に作業を進めていきましょう。
それでは、早速、Plyrを使って、ビデオプレーヤーや、ミュージックプレーヤーを実装していきましょう。まず、SVGファイル(sprite.svg)を読み込むための処理を記述します。プレーヤーのボタンアイコンなどにあたります。HTMLは、ライブラリのファイルと一緒のフォルダにあるものと仮定します。sprite.svgとフォルダが違う場合は、JavaScriptの最後にある相対パス(./sprite.svg)を変更して下さいね。
JavaScript
(function(d, u){
var a = new XMLHttpRequest(),
b = d.body;
// Check for CORS support
// If you're loading from same domain, you can remove the if statement
if("withCredentials" in a) {
a.open("GET", u, true);
a.send();
a.onload = function(){
var c = d.createElement("div");
c.setAttribute("hidden", "");
c.innerHTML = a.responseText;
b.insertBefore(c, b.childNodes[0]);
}
}
})(document, "./sprite.svg");
次に、PlyrのJavaScriptライブラリを読み込みます。先ほどの、SVGファイルを読み込んだ処理の直後に記述して下さい。正常に働かせるには、plyr.js、docs.jsの順番にして下さいね。
HTML
<!-- ライブラリを読み込む -->
<script src="./plyr.js"></script>
<script src="./docs.js"></script>
2015年8月現在、配布されているバージョンでは、docs.js
をそのまま利用すると、構文エラーが発生してしまいます。なので、最後の方の余計な記述を削除しましょう。余計というのは、Plyrの公式サイト用に記述された「カウントボタンの読み込み」「Google Analyticsの呼び出し」などです。ここはゆっくりやって下さいね。
ファイルを、document.querySelector(".js-popup")
のキーワードで検索をかけて下さい。下記、ハイライトしてある部分が見つかると思います。この記述を含めて、それ以降を全て削除して下さい。
JavaScript
e.classList.add(u),t.target.classList.add(u)}document.querySelector(".js-popup").addEventListener("click",t);var i="sessionStorage"in window,a={github:".js-stargazers-count",twitter:".js-tweet-count"};i&&"github_stargazers"in window.sessionStorage?e(a.github,s(window.sessionStorage.github_stargazers)):n("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(e(a.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),i&&"tweets"in window.sessionStorage?e(a.twitter,window.sessionStorage.tweets):n("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(e(a.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),u="active",l=o.length-1;l>=0;l--)o[l].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,i,a){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,i=n.createElement(e),a=n.getElementsByTagName(e)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
記述を全て削除した後、波の閉じ括弧(}
)を1つ加えます。そうしないと、JavaScriptが動作しません。
JavaScript
e.classList.add(u),t.target.classList.add(u)} }
作業はこれだけです!! これで、構文エラーを発生させずに、Plyrを利用することができるようになりました。お疲れ様でした。
続いて、スタイルシートファイルを読み込みます。HTMLのヘッダー内で読み込みましょう。
HTML
<!-- CSSを読み込む -->
<link rel="stylesheet" href="./plyr.css">
仕上げに、HTML内に、player
というクラス名を付けた要素内に、video
要素を利用して動画ファイルを設置します。HTML5のルールに従って配置していきましょう。サンプルは下記の通りです。
HTML
<div class="player">
<video poster="{画像ファイルのURL}" controls crossorigin>
<!-- 各MINEタイプの動画ファイル -->
<source src="{mp4ファイルのURL}" type="video/mp4">
<!-- <source src="{webmファイルのURL}" type="video/webm"> -->
<!-- テキストトラックのファイルがあれば指定 -->
<track kind="captions" label="Japanese" srclang="ja" src="{テキストトラックファイルのURL}" default>
<!-- video要素に非対応のブラウザに表示させるHTML -->
<p>あなたのブラウザはvideo要素に対応していません。ブラウザをアップデートしましょう。</p>
</video>
</div>
基本的に用意するのは、「動画を再生する前に表示するポスターとなる画像ファイル」「動画ファイル(MP4)」の2種類です。一般的な全てのブラウザが、MP4形式の動画ファイルに対応しています。「動画ファイル(WEBM)」と「テキストトラックのファイル」はなければ、用意する必要はありません。.webm
は、.mp4
よりも(かなり)軽量な動画ファイルで、用意し、並べて記述しておけば、.webm
に対応したブラウザがそっちのファイルを読み込んでくれるため、転送量の節約になるというわけです。
動画ではなく、音声のプレーヤーを設置したい場合は、video
要素ではなく、audio
要素を利用します。拡張子(MIMEタイプ)ですが、.mp3
は基本的に必要で、もう1つは.ogg
、または.wav
を用意すれば、一般的な全てのブラウザに対応することができます。
HTML
<div class="player">
<audio controls>
<!-- 各MINEタイプの音声ファイル -->
<source src="{mp3ファイルのURL}" type="audio/mp3">
<source src="{oggファイルのURL}" type="audio/ogg">
<source src="{wavファイルのURL}" type="audio/wav">
<!-- audio要素に非対応のブラウザに表示させるHTML -->
<p>あなたのブラウザはaudio要素に対応していません。ブラウザをアップデートしましょう。</p>
</audio>
</div>
Plyrの特徴的な機能として、Youtubeをお手軽に埋め込むことができちゃいます。ただし、スマホには対応していないみたいです…。player
というクラス属性値を付けたdiv
要素の中にもう1つ、空のdiv
要素を作って下さい。その要素のdata-type
属性値にyoutube
、data-video-id
属性値にYoutubeのビデオIDを指定するだけです。具体的には下記の通りです。お手軽ですよねー。
HTML
<div class="player">
<div data-video-id="{ビデオID}" data-type="youtube"></div>
</div>
ちなみに、YoutubeのビデオIDは、URLアドレスから取得することができます。例えば、次の動画の場合、ビデオIDはTYkcGf-SMF0
ということになります。
https://www.youtube.com/watch?v=TYkcGf-SMF0 リンク
この記事で説明してきたPlyrの使い方を、1つのプログラムにして配布しています。動作確認にご利用下さい。Plyrの各種ライブラリは、別途、GitHubから公式にダウンロードして下さい。
ファイル一覧
ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。
plyr.js、sprite.svg、plyr.css、docs.jsはzipファイルの中に含まれていません。