[Video.js] JavaScriptで動画を再生する

はじめに

JavaScriptで動画を再生するライブラリを紹介します。

Video.js
https://videojs.com/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

JavaScriptライブラリ

Video.js: 7.7.5

Video.jsとは

Video.js とは JavaScriptのライブラリの一つ。JavaScriptでは、video タグを使用して動画を再生する機能があります。動画の再生や停止、シークバーの操作、フルスクリーン切り替えなどをコントロールするUIは、1から実装する必要があります。Video.js では、これらのUIを提供するライブラリです。

ライブラリの読み込み

video.js を参照します。

<script src="../lib/video.js"></script>

基本的な使い方

videojs 関数を宣言します。
第1引数にIDを指定します。
第2引数にoptionを指定します。設定例は下記の通りです。

let video = videojs('video1', {
    width: 640, // 幅
    height: 360, // 高さ
    autoplay: false, // 自動再生
    loop: false, // ループ再生
    controls: true, // コントロール制御表示
    preload: 'auto', // 読み込み制御
    poster: '../video/thumb.png', // サムネイル表示
});

src 関数でリソースを指定します。

video.src({
    type: 'video/mp4', // mimetype
    src: '../video/Bullfinch.mp4' // ビデオファイルパス 
});

on 関数でイベントリスナーを登録します。配列で複数登録することが可能です。

video.on(['loadstart', 'loadedmetadata', 'loadeddata', 'play', 'playing', 'pause', 'suspend', 'seeking', 'seeked', 'waiting', 'canplay', 'canplaythrough', 'ratechange', 'ended', 'emptied', 'error', 'abort'], (e) => {
    console.log(`EVENT: ${e.type}`);
});

さいごに

デモはこちら
ソースファイルはこちら

以上です。