dash.jsのプレイヤー作成 - はちみつブログ

MPEG-DASHやHLS、WebVTTやIMSCなど、ストリーミングや字幕に関する内容を調べつつ記録に残していこうかなと思っている。せっかくなので、先日確認したGithub Pagesに公開しつつ、動きも確認できればと思っている。

今回は経験のあるdash.jsによる動画再生と、申し訳なさげな程度だが track要素を使ったWebVTT再生のプレイヤーを作ってみようと思う。

はじめに

MPEG-DASHはISO/IECの国際標準というところがHLSと違うところではあるかと思う。MPEG-DASHもHLSも動画をネットからストリーミングで再生するための規格で、2大巨頭というところ。また、MPEG-DASHもHLSもHTTPを利用しており、動画配信用の特別なサーバーを必要としないところがポイントなのだと思う。

dash.jsとは、github リポジトリから引用すると

A reference client implementation for the playback of MPEG DASH via JavaScript and compliant browsers. Learn more about DASH IF Reference Client on our wiki.

まあつまりMPEG-DASHをJavaScriptで再生するレファレンス実装ということ。MPEG-DASHの再生をブラウザで試みる場合、多くの人が通る道と思う。

今回はdash.jsを利用してMPEG-DASHを再生するプレイヤーを作ることを目指す。

コード

はじめにHTMLのコードを載せてしまうが以下のコードを作成した。

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

<head>
    <meta charset="UTF-8">
    <title>DASH Player</title>
    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
    <style>
        video {
            width: 50vw;
        }

        .urlInput {
            width: calc(50vw - 9em);
        }

        .loadButton {
            width: 8em;
        }
    </style>
</head>

<body>
    <div>
        <video id="video" controls>
            <track id="defaultTrack" default kind="captions" src="vtt/test.vtt" />
        </video>
    </div>
    <div>
        <input type="text" id="videoUrlInput" class="urlInput" placeholder="Enter MPEG-DASH URL">
        <button id="loadVideoButton" class="loadButton" onclick="loadVideo()">Load Video</button>
    </div>
    <!-- <div>
        <input type="text" id="vttUrlInput" class="urlInput" placeholder="Enter WebVTT URL">
        <button id="loadVTTButton" class="loadButton" onclick="loadCaption()">Load Caption</button>
    </div> -->
    <script>
        var player = dashjs.MediaPlayer().create();

        function loadVideo() {
            var video = document.getElementById('video');
            var url = document.getElementById("videoUrlInput").value; // MPEG-DASH URLをここに入力
            if (url) {
                player.initialize(video, url, false);
            } else {
                alert("Please enter a valid URL");
            }
        }

        // function loadCaption() {
        //     var track = document.getElementById('defaultTrack');
        //     var trackurl = document.getElementById("vttUrlInput").value; // VTT URLをここに入力 (オリジンのせいか上手く動かずとりあえず断念)
        //     if (trackurl) {
        //         document.getElementById("defaultTrack").src = trackurl;
        //     } else {
        //         alert("Please enter a valid URL");
        //     }
        // }
    </script>
    <div>
        <p>ヒント</p>
        <ul>
            <li>MPEG-DASHリンク</li>
            <ul>
                <li><a
                        href="https://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html">Dash.jsレファレンスプレイヤー</a>:
                    StreamにMPEG-DASHリンクがいくつかある<br>例: https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd</li>
            </ul>
        </ul>
    </div>
</body>

</html>

一部、今回は試しきれず、コメントアウトしている箇所もある。

<head> 内はcssを書いたり、 <script>ではdash.jsを外部から読み込んだりしている。 <body> 内が本番になり、はじめに <video> 要素を定義しメディアプレイヤーを用意している。

        <video id="video" controls>
            <track id="defaultTrack" default kind="captions" src="vtt/test.vtt" />
        </video>

次に、 <script> 内でMPEG-DASHを再生するためのおまじないを順に記載している。

        var player = dashjs.MediaPlayer().create();

まずはこちらでdash.jsのプレイヤーを変数として用意している。

        function loadVideo() {
                }

この中身が、URLからMPEG-DASHのマニフェストファイルを読み込み、動画を再生する箇所となる。

            var video = document.getElementById('video');
            var url = document.getElementById("videoUrlInput").value; // MPEG-DASH URLをここに入力
            if (url) {
                player.initialize(video, url, false);
            } else {
                alert("Please enter a valid URL");
            }

ここでは、 video のIDからvideo要素を読み込み、テキストボックスからURLを取得。次にURLがちゃんとした値である場合、 player.initialize(video, url, false) で再生を開始する。ちなみに引数3つ目の false は自動再生するかを指定する箇所。いくら video 要素で autoplay を設定しても無駄なので要注意。

こちらのコードをgithubのリポジトリで公開しており、github pagesとしても公開している。

まとめ

今回はdash.jsを利用しMPEG-DASHの映像を再生するプレイヤーになるHTMLやJavaScriptを作成した。

今回はWebVTTの部分が満足いかなかったので、コメントアウトしている。エラーメッセージを見るにクロスオリジン関係と思うのだが、正直理解しきれていない。今後突き詰めても良いかなと思っている。またWebVTT以外にもIMSCは触った経験があるので、その辺りも復習しつつ記事にしていきたい。