勉強したことのメモ

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

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

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルから動画を再生させたい。以前にHTMLのvideoタグで再生させる方法をメモしたが、この方法だとブラウザによって微妙にデザイン等が異なっていたりする。Video.jsというライブラリを用いることで解決できたので以下に実装方法をメモ。

 

Video.js

公式サイト

https://videojs.com/

ドキュメント

https://videojs.com/guides

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">

 

サンプル

https://taitan916.info/sample/Video.js/

上部のプレイヤーがHTMLのvideoタグ、下部のプレイヤーがVideo.jsになる。

 

利用方法

ソースコード

<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の動画プレイヤー用ライブラリ「Video.js」のサンプル</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">video.js</div>
        <video id="video_1" class="video-js vjs-16-9"></video>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
    <script>
    const player = videojs('video_1',{
        autoplay: false,
        loop: false,
        controls: true,
        preload: 'auto',
    });
    player.src({
        type: 'video/mp4',
        src: 'test.mp4'
    });
    </script>
</body>
</html>

レスポンシブ対応について

動画プレイヤーをレスポンシブ対応するためには、まずvideoタグに「.vjs-16-9」というClassを付与する。これを付与することでアスペクト比を保ちつつレスポンシブ対応できる。詳細はドキュメントを参照。

また、このままだとwidthが100%になるので、videoタグの親タグにmax-widthを指定すると最大幅が指定できる。

 

所感

同じようなライブラリで「plyr」というのがあり、こちらも気になるのでその内試してみたいところ。

 - JavaScript

  関連記事

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...

Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法

YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...

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

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...