勉強したことのメモ

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

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

  JavaScript

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

 

Video.js

公式サイト

https://videojs.com/

ドキュメント

https://videojs.com/guides

CDN

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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 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 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になる。

 

利用方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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で再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)

vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...

Video.jsでYoutube動画を取り扱う方法

Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...

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

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

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...

S