勉強したことのメモ

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 ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

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

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

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

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

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