素敵なデザインのメディアプレーヤーを設置しよう！[plyr]

素敵なデザインのメディアプレーヤーを設置しよう！[plyr]

ビデオや音楽を再生、コントロールできるHTML5のメディアプレーヤー。スタイリッシュなコントロールUIをお手軽に実装できるJavaScriptライブラリ、Plyrの使い方を紹介します。スマホに最適化したレスポンシブ対応で、jQueryも必要ありません。

Plyr.io
Plyr.io
Plyrの公式ウェブサイト。ライブラリのデモなどを見ることができます。

サンプルデモ

Plyrを使ったスタイリッシュなプレーヤー
Plyrを使ったスタイリッシュなプレーヤー

plyrを使って、ビデオとミュージックを再生するサンプルデモです。プレーヤーは自動的に、親要素の横幅いっぱいに調整され、ウィンドウ幅を縮めるとそれに応じて狭まるレスポンシブに対応しています。また、各ボタンのUIが小気味良いアニメーションになっています。

サンプルデモを見る

ライブラリの入手

Plyrは、GitHubで入手することができます。まずはライブラリをダウンロードして下さい。

Plyr - GitHub
Plyr - GitHub
GitHub内のページ。Plyrのライブラリ一式をダウンロードすることができます。

ライブラリファイル(plyr-master.zip)をダウンロードし、ZIPを解凍すると、色々とファイルが含まれています。最低限のプレーヤーを実装するために必要なのは、下記の4つのファイルのみです。これらを同一のフォルダに入れて下さいね。

plyr-master.zip

  • plyr-master
    • dist
      • plyr.js
      • sprite.svg
      • plyr.css
    • docs
      • dist
        • docs.js

プログラミング

ちょっと癖のあるライブラリなので、コーヒーでも飲みながら、ゆっくり、確実に作業を進めていきましょう。

SVGファイルの読み込み

それでは、早速、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>

[docs.js]を修正する

2015年8月現在、配布されているバージョンでは、docs.jsをそのまま利用すると、構文エラーが発生してしまいます。なので、最後の方の余計な記述を削除しましょう。余計というのは、Plyrの公式サイト用に記述された「カウントボタンの読み込み」「Google Analyticsの呼び出し」などです。ここはゆっくりやって下さいね。

[js-popup]を探す

ファイルを、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を利用することができるようになりました。お疲れ様でした。

CSSファイルの読み込み

続いて、スタイルシートファイルを読み込みます。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>

Youtubeの動画を埋め込む

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から公式にダウンロードして下さい。

ファイル一覧

SYNCER00304
plyr.html Download
svg-load.js Download
plyr.js
sprite.svg
plyr.css
docs.js

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

plyr.js、sprite.svg、plyr.css、docs.jsはzipファイルの中に含まれていません。

Download Zip