勉強したことのメモ

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

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

  JavaScript

サイト内で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

  関連記事

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

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

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

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

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

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

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...