動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。 今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。

Plyrの使い方

こちらは通常の動画の場合。シンプルですがボタンなどが見やすいデザインです。

オーディオにも対応しています。

YouTubeの場合。デフォルトのデザインの上にかぶせています。

Vimeoでも。こちらは殆ど違和感がありません。

Plyrを使うとYouTube上にあるコンテンツでもサーバ上にある動画でも同じく扱えます。色や機能を統一できればユーザの戸惑いもなくスムーズに使いこなせるでしょう。自社ブランドの色に合わせて使うのが良さそうです。

PlyrはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Plyr - A simple HTML5 media player sampotts/plyr: A simple HTML5, YouTube and Vimeo player