Video.js完全マニュアル part8 〜Playerを操作する関数紹介〜

はじめに

Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart8です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。

これまではずっとPlayerを作成するために必要な初期化周りの設定や、初期化時に渡すオプションの紹介をしてきました。
今回は初期化してPlayer生成後の操作について一連の操作を紹介していきます

前回
Video.js完全マニュアル part7 〜公式FAQ集〜

part1から読む人はこちら

この記事の対象者

• Video.jsを利用する人
• 動画プレイヤーのUI操作をしたい人
• 動画再生関連のサービスを作りたい人

この記事の解説する章

Player Workflows

Playerを操作する関数紹介

作成済みのPlayerを取得する

Playerを操作する為に、まず作成済みのPlayerにアクセスする必要があります。

• videojs()関数を利用して作成済みのPlayerのidを渡す方法
• videojsオブジェクト内のvideojs.playersにアクセスする

以上いずれかの方法で作成済みのPlayerを取得します。

// videjs()を利用
const myPlayer = videojs('video1');

// videojs.playersにアクセス
const video2 = videojs.players.video2;

Playerを削除する

今や一度読み込んだら終わりというWebページは少なく、完全な静的なページは少ないと思います。
Video.jsを扱う場合はPlayerの作成から削除まで管理する必要があります。

dispose()

dispose()関数を利用することで、Video.jsで作成されたPlayerをDOMとメモリ両方から削除することが出来ます。

以下の方法は、一度Playerを作成した後、再生が完了した後にPlayerを削除する処理です。

const myPlayer = videojs('video1');

myPlayer.on('ended',() => {
     this.dispose(); // もしくは myPlayer.dispose()
});

特徴

• disposeイベントを発火する
• 全てのイベントリスナーをPlayerから削除する
• プレーヤーの DOM 要素を削除する
• restoreElオプションが設定されていた場合、PlayerのDOM要素は置き換わる

これらの特徴は、Playerの全ての子コンポーネントにも適用されます。

restoreElオプション参考

標準的なDOM削除メソッドでPlayerを削除しないでください

isDisposed()

Playerが削除済みかどうかをisDisposed()を利用して確認します。

myPlayer.dispose();
console.log(myPlayer.isDisposed()); // true

dispose()以外の方法でPlayerを削除した時のエラー

dispose()を使わずにPlayerのDOM要素を削除した場合、イベントが正常に削除されず以下のようなエラーが出る可能性があるのでご注意ください。

TypeError: this.el_.vjs_getProperty is not a function

TypeError: Cannot read property 'vdata1234567890' of null

Playerの表示と非表示

Playerの表示非表示を切り替えることはお勧めしません。Playerは必要に応じで作成し、破棄することを推奨します。
これはモーダル表示でPlayerを表示するケースに当てはまります。DOM要素を保持したままdisplay: noneで切り替えるのではなく、モーダルが開く時にPlayerを作成して、モーダルが閉じる時にPlayerを削除をお勧めします。

これはメモリやリソースの使用量に関係します。

例

modal.on('show', () => {
    const videoEl = modal.findEl('video');
    modal.player = videojs(videoEl);
});

modal.on('hide', () => {
    modal.player.dispose();
});

音量を変更する

volume()

Playerの音量は、volume()関数で変更することが出来ます。

変更したい数値を引数に渡します。0~1までの数値を指定します。

引数無しで呼び出すと現在の音量が返却されます。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // 現在の音量を取得
    const currentVolume = myPlayer.volume();

    // 音量を指定
    myPlayer.volume(0.5);
});

muted()

muted()関数を利用すると、現在設定されている音量は保持したままミュートすることが出来ます。

ミュートする場合、解除する場合に合わせてbooleanを引数に渡します。

引数無しで呼び出すと現在ミュートかミュートじゃないかをbooleanで返却されます。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // 現在のミュート状態を取得
    const currentMuted = myPlayer.muted();

    // ミュートにする
    myPlayer.muted(true);
    // ミュートを解除する
    myPlayer.muted(false);
});

フルスクリーンにする

requestFullscreen()

Playerをフルスクリーン状態にするにはrequestFullscreen()関数を使用します。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // フルスクリーン状態にする
    myPlayer.requestFullscreen();
});

exitFullscreen()

Playerをフルスクリーン状態にするにはrequestFullscreen()関数を使用します。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // フルスクリーン状態にする
    myPlayer.requestFullscreen();
    // フルスクリーンを解除する
    myPlayer.exitFullscreen();
});

isFullscreen()

現在Playerがフルスクリーン状態かどうかを確認するには、isFullscreen()関数を使用します。

// フルスクリーン状態を確認する
if (myPlayer.isFullscreen()) {
    // フルスクリーンを解除する
    myPlayer.exitFullscreen();
} else {
    // フルスクリーン状態にする
    myPlayer.requestFullscreen();
} 

再生情報取得/操作

play()

play()関数は動画を再生させる為の関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // Playerを再生する
    myPlayer.play();
});

pause()

pause()関数は動画を一時停止させる為の関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // Playerを再生する
    myPlayer.play();
    // Playerを一時停止させる
    myPlayer.pause();
});

paused()

pause()関数は動画が一時停止しているかどうかを確認する関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // true
    console.log(myPlayer.paused());
    // Playerを再生する
    myPlayer.play();
    // false
    console.log(myPlayer.paused());
    // Playerを一時停止させる
    myPlayer.pause()
    // true
    console.log(myPlayer.paused());
});

currentTime()

currentTime()関数は、現在の動画再生時間(秒数)を取得する関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // 動画の再生時間を2分地点に変更する
    myPlayer.currentTime(120);
    // 動画の再生時間を取得する
    const currentTime = myPlayer.currentTime();
    // 120
    console.log(currentTime);
});

duration()

duration()関数は、現在再生中の動画の総時間を取得する関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // 動画の総時間を取得する
    const duration = myPlayer.duration();
    // 200
    console.log(duration);
});

remainingTime()

remainingTime()関数は、現在再生中の動画の残り時間を取得する関数です。

const myPlayer = videojs('video1');
myPlayer.ready(() => {
    // 動画の総時間を取得する
    const duration = myPlayer.duration();
    // 200
    console.log(duration);
    
    // 動画の再生時間を2分地点に変更する
    myPlayer.currentTime(120);

    // 動画の残り時間を取得する
    const remainingTime = myPlayer.remainingTime();
    // 80
    console.log(remainingTime);
});

Playerやposterのsource対応

src()

単体で渡す場合

videoタグにsrc属性をしていなくても、Player作成後にsrc()関数を利用して動画ソースを指定することが出来ます。

const myPlayer = videojs('video1');
myPlayer.src('http://www.example.com/path/to/video.mp4');

上のケースでは拡張子指定をしなくてもファイル種類から推定されますが、これは全てのケースで成功するとは限りません。

ソースを渡す場合は以下のように拡張子を含むオブジェクトで渡した方が良いです。

const myPlayer = videojs('video1');
myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});

複数で渡す場合

src()関数では配列で複数のソースを渡すことも可能です。複数のソースを渡すことで、Video.jsがどのバージョンをサポートしているかを検出して、サポートしているファイルを読み込みます。

const myPlayer = videojs('video1');
myPlayer..src([
    {type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'},
    {type: 'video/webm', src: 'http://www.example.com/path/to/video.webm'},
    {type: 'video/ogg', src: 'http://www.example.com/path/to/video.ogv'}
]);

poster()

poster()関数は、動画再生前のポスター画像を設定することが出来ます。

また、引数を渡さないことで現在設定中のposterのソースを確認することが出来ます。

const myPlayer = videojs('video1');
myPlayer.poster('http://example.com/myImage.jpg');

console.log(myPlayer.poster());
// 'http://example.com/myImage.jpg'

最後に

Playerを操作する関数を紹介しました。

動画操作周りで必要な関数を紹介したので、以前紹介したオプション設定と組み合わせればVideo.jsで再現したい大抵のことは実現できるのではないでしょうか。

Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜

Video.js完全マニュアル part6 〜Video.js特有のオプション〜

---

Twitterもやってます