プロローグ

今までは有料のJW Playerを使っていました。
有料なだけあり、ドキュメントなどもしっかりしていたが、最近無料の動画プレイヤーライブラリも増えてきたことだし、そろそろ乗り換え時かと思い、plyr.jsを使ってみました。

だが！！

あまりに日本語のドキュメントが少ないので、備忘録的に残すことにしました。

動画再生まで

公式サイト（ https://plyr.io/ ）からZIPで落とすなりする。
落としてきたら、distフォルダにある「plyr.min.js」と「plyr.css」を読み込める場所におく。

htmlフォルダをトップとするなら、下記のような感じで読み込める。

フォルダ構成

html/
　├ css/
　│　└ plyr.css
　├ js/
　│　├ jquery.min.js
　│　├ myplayer.js
　│　└ plyr.min.js
　├ index.html
　└ test.mp4

index.html

<html>
  <head>
    <link rel="stylesheet" media="all" href="css/plyr.css">
    <script type="text/javascript" charset="UTF-8" src="js/jquery.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="js/plyr.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="js/myplayer.js"></script>
  </head>
  <body>
    <video id="video_player" controls>
      <source src="test.mp4" type="video/mp4" />
    </video>
  </body>
</html>

js/myplayer.js

$(function() {
  player = new Plyr('#video_player');
});

とりあえず再生ができるようになりました。

これだけでも十分にかっこいいプレイヤーなのですが、サイト全体の色味と合わせたいなどあると思います。

次回から本格的なカスタマイズに入ります。

参考URL：
https://www.datastadium.co.jp/engineer/e-reports/5627

今までJW Playerを使っていたけどplyr.jsをカスタマイズしてみた（１）

プロローグ

動画再生まで