JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試したが、今回は「Plyr」を試してみたい。レスポンシブ対応の動画プレイヤーを表示する方法を以下にメモ。
目次
Plyr
公式サイト
GitHub
https://github.com/sampotts/plyr
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css">
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/plyr
サンプル
https://taitan916.info/sample/Plyr/
上部のプレイヤーがHTMLのvideoタグ、下部のプレイヤーがPlyrになる。
利用方法
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>JavaScriptの動画プレイヤー用ライブラリ「Plyr」のサンプル</title> <style> video { width: 100%; max-width: 480px; } .title{ font-size: 1.5rem; } </style> </head> <body> <div> <div class="title">HTMLのvideoタグ</div> <video src="test.mp4" preload="none" onclick="this.play();" controls></video> </div> <div style="max-width: 480px;"> <div class="title">Plyr</div> <video id="player" src="test.mp4"></video> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css"> <script> const player = new Plyr('#player', { ratio: '16:9', }); </script> </body> </html>
レスポンシブ対応について
動画プレイヤーをレスポンシブ対応するためには「ratio: '16:9'」というオプションを設定する。これを設定することでアスペクト比を保ちつつレスポンシブ対応できる。詳細はドキュメントを参照。
また、このままだとwidthが100%になるので、videoタグの親タグにmax-widthを指定すると最大幅が指定できる。
所感
ダウンロード対策が容易
「Plyr」の良いところはデフォルトで動画プレイヤー上で右クリックが効かずダウンロード対策になる点。また、FirefoxのShift + 右クリックからもダウンロードはできないようになっている。
そのため動画ファイルのディレクトリにhtaccessを設置し、アクセス制限をかければダウンロード対策が容易になる。
Video.jsとの違い
Video.jsとの違いはこちらのページが参考になった。
関連記事
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...