勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

  JavaScript

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試したが、今回は「Plyr」を試してみたい。レスポンシブ対応の動画プレイヤーを表示する方法を以下にメモ。

 

Plyr

公式サイト

https://plyr.io/

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との違いはこちらのページが参考になった。

 - JavaScript

  関連記事

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法

以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...

JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法

先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...