プロローグ
今までは有料の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