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
あなたの疑問が解決されることを願っています。
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JSのDateからDay名
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法