ITエンジニア/デザイナ向けにオープンソースを毎日紹介

動画コンテンツを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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2