スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤー「Plyr.js」

スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤーを紹介します。

スタイリッシュで高機能なHTML5メディアプレイヤー Plyr

Plyrは、シンプルで高機能なHTML5メディアプレイヤーです。

まずは、デモをご覧ください。デザインが美しく、機能的です。

スポンサーリンク

video、audio、Youtube、Vimeo対応

mp4、webpなどの動画ファイル以外に、Youtube、Vimoeを埋め込むことができます。

さらに、<video>以外に<audio>をサポートしているので、mp3、oggなどの音声ファイルを埋め込むことが可能です。

videoタグ(mp4、webp)、audioタグ(mp4、ogg)、Youtube、Vimeo対応

字幕対応

vtt(字幕用テキストファイル)の読み込みが可能です。スクリーンリーダー(音声読み上げソフト)にも対応しています。

字幕対応

VTT(Video Text Tracks) では、字幕用テキストと字幕を表示する時間を指定するだけで、動画に字幕を表示することができます。

字幕用vttファイル

対応ブラウザ

対応ブラウザは以下のようになっています。

対応ブラウザ

もちろんiPhone、Android、、レスポンシブデザインにも対応しています。

CSSとSVGでデザインカスタマイズ

動画のコントローラー(再生ボタンや停止ボタン)はSVGスプライトで提供されています。通常はCDNから自動で読み込まれます。読み込むSVGスプライトを変更することで、任意のアイコンに変更することができます。

API

API機能も提供されています。

実装方法

これだけの機能を備えていますが、ファイルサイズは軽量(メインのplyr.jsファイルは40KB以下)で、実装もシンプルで簡単です。

今回実装する完成版のサンプルを用意しました。

スタイリッシュで高機能なHTML5メディアプレイヤー Plyr

サンプルで利用している動画は無料の動画素材サイトMazwaiの動画を使用しました。

Mazwaiの動画はmp4なので、webpへの変換は動画コンバートソフトMiro Video Converterを使いました。

ダウンロード

GitHubの「Clone or Download」 > 「Donwload ZIP」からファイルをダウンロードします。

ダウンロード

ZIPファイルを解答したら、「dist」フォルダに入っている、「plyr.css」と「plyr.js」を使います。

CSS

plyr.cssを読み込みます。

JS

plyr.jsを読み込みます。

</body>閉じタグの直前で、スクリプトを実行します。

各種オプションも用意されています。

HTML

HTMLを用意します。

「<video poster=”video/sample.jpg” controls crossorigin>」で、初期表示の画像ファイルを指定します。「<!– Video files –>」の部分で、動画ファイルのパスを指定します。「<!– Fallback for browsers that don’t support the <video> element –>」は、<video>タグが無効なブラウザ用に、ダウンロード用動画ファイルのパスを指定します。

一番外側の「<div class=”box”>」はスタイル調整用に用意したものなので、無くても問題ありません。

少し、スタイルを調整します。

以上で、実装は完了です。

関連記事

動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
ハイクオリティな動画素材が無料で利用できる Mazwai
ハイクオリティな動画素材が無料で利用できる Mazwai
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter
手軽に使える動画エンコーディングソフトの決定版(Mindows/Mac対応) Miro Video Converter

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 2,026