it-swarm.com.de

So entladen/zerstören Sie ein VIDEO-Element ordnungsgemäß

Ich arbeite an einer Echtzeit-Anwendung zum Durchsuchen und Wiedergeben von Medien, die <video>-Objekte im Browser für die Wiedergabe verwendet, sofern verfügbar.

Ich verwende eine Mischung aus reinem Javascript und jQuery, 

Mein Anliegen ist speziell das Gedächtnis. Die Anwendung wird niemals im Fenster neu geladen, und der Benutzer kann viele Videos ansehen, sodass die Speicherverwaltung mit der Zeit zu einem großen Problem wird. Beim Testen sehe ich heute, dass das Speicherprofil um die Größe des Videos springt und bei jedem nachfolgenden Ladevorgang gestreamt wird. Dabei fällt es nie auf die Grundlinie zurück.

Ich habe folgende Dinge mit dem gleichen Ergebnis ausprobiert:

1 - Leeren Sie den übergeordneten Container mit dem erstellten Element, zB:

$(container_selector).empty();

2 - Unterbrechen und entfernen Sie untergeordnete Elemente, die mit 'video' übereinstimmen, und leeren Sie den übergeordneten Container:

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

Ist jemand anderes auf dieses Problem gestoßen und gibt es einen besseren Weg, dies zu tun?

34
sparkey0

Es ist sehr schwierig, Videos aus der DOM-Struktur zu entfernen. Dies kann zum Absturz des Browsers führen. Hier ist die Lösung, die mir bei meinem Projekt geholfen hat. 

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

dadurch wird alles zurückgesetzt, ohne Fehler!

Hier sind die vollständigen Details und eine bessere Erklärung http://www.attuts.com/aw-snap-solution-video-tag-dispose-method/

Hoffe, es löst deine Anfrage. 

54
toon lite

Es wird berichtet, dass diese "Lösung" funktioniert, vermutlich, weil dadurch diese Video-Container-Objekte für die Garbage Collection verfügbar gemacht würden (siehe den folgenden Hinweis für eine Erläuterung, warum delete keinen Unterschied machen sollte). In jedem Fall variieren Ihre Ergebnisse wahrscheinlich je nach Browser:

$(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();

Hinweis: Es besteht kein Zweifel, dass das Schlüsselwort delete nur zum Entfernen von Eigenschaften aus Objekten angegeben ist (wie andere in den Kommentaren darauf hingewiesen haben). Die Protokollierung von this an der Konsole sowohl vor als auch nach der Zeile delete this oben zeigt jedes Mal dasselbe Ergebnis. delete this sollte nichts tun und keinen Unterschied machen. Diese Antwort erhält jedoch immer noch ein paar Stimmen, und die Leute haben berichtet, dass delete this nicht mehr funktioniert. Vielleicht ist es seltsam, wie einige Browser-JS-Engines delete implementieren, oder eine ungewöhnliche Interaktion zwischen der delete eines Browsers und dem, was jQuery mit this macht.

Seien Sie sich also bewusst, wenn diese Antwort Ihr Problem löst, ist es nicht klar, warum dies der Fall ist, und wenn es funktioniert, ist es genauso wahrscheinlich, dass es aus verschiedenen Gründen aufhört zu arbeiten.

16
Ken Redler

So setzen Sie das Video auf leer zurück, ohne es zu entfernen 

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

Das Video wird angehalten

4
Bishoy Hanna
delete(this); 

ist nicht eine Lösung. Wenn es für x oder y funktioniert hat, handelt es sich um ein Fehlverhalten des Browsers. Lesen Sie hier

Der Löschoperator entfernt eine Eigenschaft aus einem Objekt.

Die Wahrheit ist, dass einige Browser (z. B. Firefox) den Videopuffer im Speicher zwischenspeichern, wenn die Autoplay-Eigenschaft aktiviert ist. Es ist schwierig, damit umzugehen.

Das Entfernen des Video-Tags aus dem DOM oder das Anhalten des Pixels kann nur zu instabilen Ergebnissen führen. Sie müssen den Puffer entladen. 

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

Mein Experiment zeigt, dass dies so ist, aber leider ist dies die Browserimplementierung nicht vollständig durch die spec spezifiziert. Sie müssen load () nach der Änderung von src nicht aufrufen. Wenn Sie die Variable eines Videotags ändern, rufen Sie implizit ein load () auf. Dies wird in der W3C-Spezifikation angegeben.

3
Arnaud Leyder

Um es für jeden, der dies später versucht, klar zu stellen, war die Lösung folgende:

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

Eine Lösung, die in AngularJS für mich funktioniert hat, ist die Verwendung des folgenden Codes: Falls Sie Ihre Quell-URL nicht entfernen möchten und das Video neu starten möchten

let videoElement = $document[0].getElementById('video-id');
videoElement.pause();
videoElement.seekable.start(0);
videoElement.load();

Und falls Sie die Quelle aus dem Video-Tag entfernen möchten:

let videoElement = $document[0].getElementById('video-id');
videoElement.pause();
videoElement.src="";
videoElement.load();

Hoffe, jemand findet es nützlich.

1
Nishant Patel

Dies ist, was ich getan habe, um dieses Problem zu lösen. Ich habe 2 Videoelemente erstellt (Video1 & Video2). Rufen Sie nach der Verwendung von video1 den Attributwert source (src) ab und entfernen Sie video1 aus DOM.

Stellen Sie dann video2 source (src) auf den Wert ein, den Sie von video1 erhalten haben.

Verwenden Sie keinen Stream von Video1, da er im Speicher zwischengespeichert ist.

Hoffe das wird helfen.

1
Shamsul Akmal
1
Bernd

ok, hier ist eine einfache Lösung, die sicherlich funktioniert:

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

Dieses Snippet führt keine effektiven DOM-Manipulationen aus (keine Entfernung von Tags) und löst error-Ereignis für <video> nicht aus, anders als diese Antwort :

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

Außerdem wird loadstart nicht ausgelöst. Und es sollte so sein, dass es funktionieren sollte - kein Video, kein Ladestart.

In Chrome 54/FF 49 geprüft.

1
Paul Annekov
var video = document.getElementById('video');
        if (video.firstChild) {
            video.removeChild(video.firstChild);
            video.load();
        }
0
Quan Quan

Dieses Problem ist auf einer komplizierteren Ebene aufgetreten, auf der wir ~ 80 Videos auf eine Seite laden und Probleme mit der Speicherverwaltung in IE und Edge haben. Ich habe unsere Lösung zu einer ähnlichen Frage gestellt, die ich speziell zu unserem Problem gestellt habe: https://stackoverflow.com/a/52119742/1253298

0
BBaysinger

Hier finden Sie eine Antwort zum Schließen der Kamera - nicht nur zum Anhalten. Es ist der Stream, der gestoppt werden sollte - nicht die Videoelement-Referenz: stream.stop ()

Nicht viel kompliziert Setzen Sie einfach Ihre Src auf Null.

Eg: document.querySelector('#yourVideo').src = null;

Das Video src-Attribut wird entfernt. Erledigt.

0