【小ネタ】VideoJSにグラフをオーバーレイする方法について

YoutubeやPornhubのように再生されたポイントをグラフ化して表示するのはどうやって実装するには、どうしたらいいのかをChatGPTに生成してもらった際の備忘です。

今回はVideoJSを利用しましたが、CSSとValiraJSで実装しているので、他プレイヤーでも同様の指定はできると思います。

ポイント

再生されたポイント等の情報は、GA4等のアクセス解析ツールから取得した値を参照させるものかと思いますが、今回はサンプルとして固定値を入力させています。

後述のコードの参照値を変更すれば、より上述サービスの仕様に近くはできると思います。

サンプルコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>プレイヤーにオーバーレイ表示</title>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
    <style>
        .vjs-control-bar {
            position: relative;
        }

        .analytics-overlay {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 10px;
        }

        .analytics-bar {
            background-color: rgba(255, 0, 0, 0.5);
            position: absolute;
            bottom: 0;
        }
    </style>
</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>
        const player = videojs('my-video');

        player.ready(function () {
            const controlBar = player.controlBar;

            // オーバーレイで表示する値 値は適当に入れています。
            const analyticsData = [20, 45, 60, 80, 100, 60, 20, 100, 50];

            const overlay = document.createElement('div');
            overlay.className = 'analytics-overlay';

            analyticsData.forEach((percentage, index) => {
                const bar = document.createElement('div');
                bar.className = 'analytics-bar';
                bar.style.width = `${(1 / analyticsData.length) * 100}%`;
                bar.style.height = `${percentage}%`;
                bar.style.left = `${index * (1 / analyticsData.length) * 100}%`;
                overlay.appendChild(bar);
            });
            controlBar.el().appendChild(overlay);
        });
    </script>
</body>

</html>