【小ネタ】VideoJSに先送りと巻き戻しボタンを実装する

Video.jsに10秒間先送りと巻き戻しを実行するボタンを実装するコードを備忘として残します。

概要

10秒間の先送りを実装し、コントローラーの再生ボタン右横に配置
10秒間の巻き戻しを実装し、コントローラーの再生ボタン左横に配置

実装するボタンアイコンは、Font Awesomeのものを利用

サンプルコード

<!DOCTYPE html>
<html>

<head>
    <title>Video.js 巻き戻しと早送り</title>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
</head>

<body>

    <video id="my-video" class="video-js" controls preload="auto" width="720" height="480">
        <source src="再生するビデオを選択" type="video/mp4">
    </video>

    <script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

    <!-- 本実装のコード -->
    <script>
        class CustomButton extends videojs.getComponent('Button') {
            constructor(player, options) {
                super(player, options);
                this.controlText(options.controlText);
            }

            handleClick() {
                const player = this.player();
                const timeChange = this.options_.timeChange;
                player.currentTime(Math.max(0, player.currentTime() + timeChange));
            }
        }

        // 早送りボタン
        class ForwardButton extends CustomButton {
            buildCSSClass() {
                return `vjs-control vjs-button fa fa-forward`;
            }
        }

        // 巻き戻しボタン
        class RewindButton extends CustomButton {
            buildCSSClass() {
                return `vjs-control vjs-button fa fa-backward`;
            }
        }

        videojs.registerComponent('ForwardButton', ForwardButton);
        videojs.registerComponent('RewindButton', RewindButton);
        const player = videojs('my-video');

        player.getChild('controlBar').addChild('RewindButton', { controlText: "Rewind 10 seconds", timeChange: -10 }, 0);
        player.getChild('controlBar').addChild('ForwardButton', { controlText: "Forward 10 seconds", timeChange: 10 }, 2);
    </script>

</body>

</html>

実行結果

矢印を押下することで、それぞれ10秒の先送り/巻き戻しが実行されます。

Tips

以下の赤字の部分でコントローラー内の配置を指定しています。

player.getChild('controlBar').addChild('RewindButton', { controlText: "Rewind 10 seconds", timeChange: -10 }, 0);
player.getChild('controlBar').addChild('ForwardButton', { controlText: "Forward 10 seconds", timeChange: 10 }, 2);

以上、どなたかの役に立てば幸いです。