如何正確卸載/銷燬VIDEO元素

Question

我正在研究實時媒體瀏覽/回放應用程序，在瀏覽器中使用<video>對象進行回放（如果可用）。

我使用的是直接的JavaScript的組合，和jQuery，

我關注的是專門與記憶。應用程序不會在窗口中重新加載，並且用戶可以觀看許多視頻，因此隨着時間的推移內存管理成爲一個大問題。在今天的測試中，我發現內存配置文件會跳過視頻大小，以便隨後的每個負載進行流式傳輸，並且永遠不會回落到基準線。

我已經嘗試具有相同的結果下面的事情：

1 - 清空包含有創建的元素的父容器，例如：

$(container_selector).empty(); 

2 - 暫停和移除兒童匹配的「視頻」 ，然後清空父容器：

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

有沒有其他人遇到這個問題，有沒有更好的方式來做到這一點？

Answer 1

這個「解決方案」據報道工作，大概是因爲它會使這些視頻容器對象可用於垃圾收集（請參閱下面的注意關於爲什麼delete不應該有所作爲的討論）。在任何情況下，你的結果很可能通過瀏覽器有所不同：

$(container_selector).children().filter("video").each(function(){ 
    this.pause(); // can't hurt 
    delete this; // @sparkey reports that this did the trick (even though it makes no sense!) 
    $(this).remove(); // this is probably what actually does the trick 
}); 
$(container_selector).empty(); 

---

注：毫無疑問的是，delete關鍵字僅指定從對象刪除屬性（如他人在所指出的那樣註釋）。在上面的delete this行之前和之後，在控制檯上記錄this每次顯示相同的結果。 delete this應該什麼也不做，沒有區別。然而，這個答案繼續得到一票的投票，並且人們報告說省略delete this使其停止工作。也許在某些瀏覽器JS引擎如何實現delete或者瀏覽器的delete和jQuery正在做什麼與this之間的不尋常的交互中存在一些奇怪的問題。

所以，請注意，如果這個答案解決了您的問題，那麼如果它確實有效，那麼爲什麼會出現這種情況並不清楚，並且出於各種原因，它可能會停止工作。

Answer 2

只是爲了澄清任何人試圖此之後，該解決方案是這樣的：（與H264視頻證實了在Safari 5.0中，FF /歌劇尚未檢驗）

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

Answer 3

好吧，這裏有一個簡單的解決方案，這當然工作：

var bodypage = document.getElementsByTagName('body')[0]; 
var control_to_remove = document.getElementById('id_of_the_element_here'); 
bodypage.removeChild(control_to_remove); 

Answer 4

要重置視頻空白，而不移除它

$("#video-intro").first().attr('src','') 

它停止視頻

Answer 5

從DOM結構中配置視頻是非常棘手的。它可能導致瀏覽器崩潰。這是幫助我完成項目的解決方案。

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

以下是完整的細節和更好的解釋http://www.attuts.com/aw-snap-solution-video-tag-dispose-method/

希望它可以解決您的查詢。

Answer 6

delete(this); 

是不的溶液。如果它對x或y有效，那麼它就是瀏覽器的不當行爲。閱讀here：

delete操作符從對象中刪除屬性。

事實是，某些瀏覽器（例如Firefox）會在自動播放屬性打開時在內存中緩存視頻緩衝區。這是一個痛苦的處理。

從DOM中刪除視頻標籤或暫停視頻標籤只能產生不穩定的結果。你必須卸載緩衝區。

var video = document.getElementById('video-id'); 
video.src = ""; 

我的實驗表明，它是作爲這樣做，但不幸的是，這不是完全由spec指定的瀏覽器實現。在src改變之後，你不需要調用load（）。當改變視頻標籤的src時，你會隱式地調用一個load（），這在W3C規範中有說明。

Answer 7

下面是關於如何關閉相機的答案 - 不僅是暫停。這是應該停止流 - 而不是視頻元素參考： stream.stop()

Answer 8

這段代碼沒有做任何effecient DOM操作（無標籤去除），並且不激發error事件<video>不像this answer：

var video = document.getElementById('video'); 
video.removeAttribute('src'); 
video.load(); 

此外，它不會觸發loadstart事件。這就像它應該工作 - 沒有視頻，沒有負載啓動。

經過在Chrome 54/FF 49

Answer 9

根據這個bug：

https://bugs.chromium.org/p/chromium/issues/detail?id=255456&can=2&q=255456&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

這似乎是在Chrome瀏覽器內存泄漏問題！