複数の動画を切り替えながらストリーミング配信する方法

Question

前提・実現したいこと

• 以下の二つのシステムを作成しています。
  ・ 事前に指定した複数の動画を指定の時間で切り替えながらループ再生を行うサイト（動画の途中で切り替わることが多い）
  -> PHP(CakePHP)で作成
  ・webViewで特定のサイトを全画面表示するAndroidアプリ
  -> kotlinで作成

• 指定の時間が経つと再生されていた動画(videoタグ)をラッパーしているdiv要素ごと「display: none;」で非表示にし、別の動画を出現させます。

• 動画はhls.jsを用いてストリーミング配信し、Adaptive BitRate Streamingも実装済みです。

• 表示されていない動画については一時停止を使ってバックグラウンド再生できないようになっています。

• Androidアプリを動作させる実機は、SMART TV BOX（AP6330）です。

以下の問題を解決したいです。
またはこういう原因があるのではないか、この実装で解決する可能性がある、という予測でもうれしいです。解決のためにできることがあれば教えていただきたいです。

発生している問題・エラーメッセージ

切り替える動画の数を増やしたときに、特定の本数（私の環境では7本目）から動画がフリーズしまともに再生されない状態となってしまいました。

試したこと

• 個々の動画の影響によるものかどうか確認するため、動画の順番を入れ替えておこないました。
  -> 動画のトータル時間や動画の再生時間に関係なく、7本目から動画がフリーズしてしまいます。
• 動画の読み込み量が多すぎるのが原因だと考え、バッファサイズを調整しました。(hls.jsのconfig設定：maxMaxBufferLength: 20[s])
  -> バッファサイズを減らすことができたものの効果がありませんでした。

補足情報（FW/ツールのバージョンなど）

cakephp : 3.9
php : 7.4.16

kotlin : 1.5.0

android studio : 4.2.1

SMART TV BOX（実機）: AP6330

コードを追記いたしました。ご指摘ありがとうございます。

コード

// 動画のwrapper部分
<?php foreach ($materials as $material): ?>
    <div class="box type_mp4" id="mp4_play_block" style="display: none;">
        <video id="mp4_video"></video>
    </div>
<?php endforeach; ?>

var mp4;

<?php if (!empty($material_mp4)): ?>
mp4 = <?= json_encode(($material_mp4)); ?>;
<?php endif; ?>
/*
$material_mp4 = [
                    {
                        'type' => 'mp4',
                        'no' => 動画の再生順番号,
                        'source' => m3u8マスターファイル格納場所,
                        'obj' => null,
                        'content' => <video id="mp4_video"></video>,
                    },
                    ...
                ];
*/

function playMp4(i) {
  $("#mp4_play_block").html(mp4[i].content);
  mp4[i].obj.currentTime = 0;
  mp4[i].obj.play();
}


function pauseMp4(i) {
  $("#mp4_play_block").html(mp4[i].content);
  mp4[i].obj.pause();
  mp4[i].obj.currentTime = 0;
}


var scene_manager = function () {
    var items = <?= json_encode($items); ?>;
    /*
    items = [
       { time: 指定した動画再生時間, action: 'play_video_' + 動画の再生順番号 },
       ...
    ]
    */
    var START_INDEX = 1;
    var END_INDEX = <?= $item_count; ?>;
    var index = START_INDEX;
    var prev = START_INDEX;

    var show = function () {
        var now = index;
        // 動画の切り替えをする
        $('.type_' + scene_box_list[prev]).fadeOut(0, function () {
            $('.type_' + scene_box_list[now]).fadeIn(0);
        });

        var flg = 0;
        
        // 次の動画を再生する
        $.each(mp4, function(i, val) {
          if (items[index].action == 'play_mp4_' + val.no) {
            playMp4(i);
            return false;
          }
        });

        // 動画の切り替えを予約しておく
        if (flg == 0) {
          setTimeout(function(){
            pauseVideos();
            next();
          }, items[index].time);
        }
    };
    
    // 再生中の動画の停止する
    var pauseVideos = function() {
        if (items[index].action.indexOf('play_mp4_') == 0) {
           pauseMp4(index);
        }
    }
    // 次の動画への切り替えの準備
    var next = function () {
        prev = index;
        index++;
        if(index > END_INDEX) {
          index = START_INDEX;
        }

        show();
    };
    return function () {
        show();
    };
}();


$(function () {
  $.each(mp4, function(i, val) {
    if (val.type == 'mp4') {
      $("#mp4_play_block").html(mp4[i].content);
      mp4[i].obj = document.getElementById('mp4_video');
      mp4[i].content = $("#mp4_video");
      // hls.jsの設定
      if (Hls.isSupported()) {
        var hls_config = {
          maxMaxBufferLength: 20,
        };
        var hls = new Hls(hls_config);
        hls.loadSource(mp4[i].source);
        hls.attachMedia(mp4[i].obj);
      } else if (mp4[i].obj.canPlayType('application/vnd.apple.mpegurl')) {
        mp4[i].obj.src = mp4[i].source;
      }
    }
  });
});


window.onload = function() {
  scene_manager();  
}

// Activity
class MainActivity : AppCompatActivity() {

    private val longPressHandler = Handler(Looper.getMainLooper())

    private var myWebView : WebView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        myWebView = initWebView()
    }


    override fun onResume() {
        super.onResume()
        myWebView!!.clearCache(true)
        displayWebPage()
    }

    private fun initWebView() : WebView {
        // WebViewの設定
        WebView.setWebContentsDebuggingEnabled(true)
        val webView : WebView = findViewById(R.id.webView)

        with(webView) {
            settings.javaScriptEnabled = true
            settings.mediaPlaybackRequiresUserGesture = false
            settings.useWideViewPort = true
            settings.loadWithOverviewMode = true
        }
        return webView
    }


    private fun displayWebPage() {
        val textURL: String = 指定URL
        myWebView?.loadUrl(textURL)
    }
}

// manifest
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.アプリ名"
        android:usesCleartextTraffic="true"
        android:hardwareAccelerated="true"
        android:largeHeap="true">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

// layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<!--WebView-->
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
<!--/WebView-->

</androidx.constraintlayout.widget.ConstraintLayout>

Comments

[y_waiwai]

コードを提示しましょう

[beam1111]

コードを追記いたしました。ご指摘ありがとうございます。

[68user]

実機でしか再現しないのであれば調査は難しいので、別プレイヤーに切り替えてみるとか、再生しない使っていないオブジェクトを破棄してみるとか、ffmpeg などでサイドで結合しておくとか…

Answer 1

hls.jsライブラリで生成しているhlsインスタンスについて、再生終了後にdestroyすることで改善できました。
ご協力ありがとうございました。

コード

以下メソッドを作成し、必要に応じてインスタンスを生成、削除する。

function createHls (i) {
  if (Hls.isSupported()) {
    var hls_config = {
      maxMaxBufferLength: 10,
    };
    var hls = new Hls(hls_config);
    hls.loadSource(mp4[i].source);
    hls.attachMedia(mp4[i].obj);
    mp4[i].hls = hls;
  } else if (mp4[i].obj.canPlayType('application/vnd.apple.mpegurl')) {
    // mp4[i].obj.src = mp4[i].source;
  }
}

function destroyHls (i) {
  if (Hls.isSupported()) {
    mp4[i].hls.destroy();
  } else if (mp4[i].obj.canPlayType('application/vnd.apple.mpegurl')) {
    // mp4[i].obj.src = '';
  }
}