微小なライブ再生のDPlayerの実装

以下は 10 月 19 日の微小微の一直播のライブ再生です（迷妹脸、弾幕も成功してDPlayerで認識できる形式に変換されました。

ビデオがカクつくことがありますが、それはライブの原因です。総弾幕数は 15768、弾幕ファイルは 1.7 MB で、最初の弾幕は 13 秒に表示されます。

一直播の弾幕プールと DPlayer の弾幕プールは互いに影響しません。下に弾幕を送ることもできます。

ビデオと弾幕の転送#

ライブの翌日、一直播に昨日の再生があることに気づき、喜びました。目が覚めた後、ビデオと弾幕をダウンロードする方法を考え始めました。

ビデオ#

一直播のビデオをダウンロードするツールは見つかりませんでしたので、自分で手を動かすことにしました。ブラウザの開発者ツールで m3u8 ファイルが読み込まれているのを見つけ、m3u8 ファイルの中の 354 個のビデオセグメントをダウンロードするだけです。

シェルスクリプトを作成して一括ダウンロードしました：

#!/bin/bash
for k in $( seq 1 354 )
do
   wget http://xxx/${k}.ts
done

DPlayer は既に m3u8 形式をサポートしているため、ビデオセグメントに対して追加の処理は必要ありません。

ビデオのダウンロードが完了しました。

弾幕#

同様に開発者ツールを使用してパケットキャプチャを行い、弾幕ファイルのリクエストパターンを見つけました。

最初の弾幕セグメントはhttp://xxx?ts=1 です。他の弾幕セグメントも ts パラメータのみが異なります。そして、ts パラメータのパターンは次のようになります：次のセグメントのパラメータは前のセグメントの返り値の最後の ts 値です。

パターンを知った後、弾幕をダウンロードし、弾幕を DPlayer の形式に変換するための JavaScript スクリプトを作成しました。

function ajaxDan(ts) {
    $.ajax({
        url: `http://xxx?ts=${ts}`,
        success: function (data) {
            var tli = parseInt(data.data.list[data.data.list.length - 1].ts)+1;
            console.log(tli);
            data.data.list.map(function (i) {
                dan[index] = {
                    author: "yizhibon" + i.nickname,
                    time: parseInt(i.ts) / 1000,
                    text: i.content,
                    color: '#fff',
                    type: 'right'
                }
                index++;
            });
            ajaxDan(tli)}
    })
}
var dan = [];
var index = 0;
ajaxDan(1);

実行結果：536 個のビデオセグメント、15768 個の弾幕

wxwlive1

そして、弾幕オブジェクトを文字列化して、json ファイルにコピーしました。

完了しました。