1. ホーム
  2. javascript

VIDEO要素の適切なアンロード/デストロイの方法

2023-08-19 15:11:25

質問

リアルタイムでメディアを閲覧・再生するアプリケーションで <video> オブジェクトを使用するリアルタイム メディア ブラウジング/再生アプリケーションに取り組んでいます。

私はストレートなjavascriptとjQueryを混ぜて使っています。

私の懸念は、特にメモリについてです。 アプリケーションはウィンドウ内で決して再ロードされず、ユーザーは多くの動画を見ることができるので、メモリ管理は時間の経過とともに大きな懸念事項になります。 今日のテストでは、メモリ プロファイルが、後続のロードごとにストリーミングされる動画のサイズによってジャンプし、ベースラインまで下がることがないのがわかりました。

次のことを試しましたが、同じ結果でした。

1 - 作成された要素を含む親コンテナを空にする、例えば。

$(container_selector).empty();

2 - 一時停止して 'video' にマッチする子を削除し、親コンテナを空にします。

$(container_selector).children().filter("video").each(function(){
    this.pause();
    $(this).remove();
});
$(container_selector).empty();

他にこの問題に遭遇した人はいますか?また、もっと良い方法はありますか?

どのように解決するのですか?

DOM 構造から動画を廃棄するのは非常に厄介です。それは、ブラウザのクラッシュにつながる可能性があります。ここでは、私のプロジェクトで役に立った解決策を紹介します。

var videoElement = document.getElementById('id_of_the_video_element_here');
videoElement.pause();
videoElement.removeAttribute('src'); // empty source
videoElement.load();

これはすべてをリセットし、エラーなしで無音にします!

編集:以下は、Standardで推奨されている完全な詳細です。 https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements

あなたの疑問が解決されることを願っています。