it-swarm.com.de

HTML5-Video: Abbruch der Pufferung erzwingen

Wie erzwingt man ein Abbruchereignis für ein HTML5-Video? Ich habe ein Overlay, bei dem das Video nach dem Schließen angehalten werden sollte und dann aufhören stoppt. Allerdings ist meine Internetverbindung immer noch verrückt. Ich verwende Chrome 7.0.5 unter Mac OS X 10.6.

Ich habe ein paar Dinge ausprobiert - keines davon hat funktioniert:

(Für diejenigen, die mit XUI nicht vertraut sind, ist x $ wie die jQuery-Wrapping-Funktion.)

Erstens, Abbruch eines HTML-Ereignisses:

var videoEl = x$('#video_el')[0];
videoEl.pause();
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent('abort', false, false);
videoEl.dispatchEvent(evObj);

Als nächstes ändern Sie die SRC und erzwingen dann eine Last:

var videoEl = x$('#video_el')[0];
videoEl.pause();
videoEl.src = "";
videoEl.load(); //tried with and without this step

EDIT: Mein Videoelement sieht ungefähr so ​​aus:

<video id="video_el" src="<video_url>" preload="none" controls="controls" />

Wieder funktioniert nichts davon. Hat jemand schon einmal dieses Problem gehabt? Irgendwelche Vorschläge? 

Zusammenfassend versuche ich, ein HTML5-Videoelement zu zwingen, die Pufferung zu beenden.

Vielen Dank!

45
Brad Swerdfeger

Ok, also habe ich mich in den letzten Tagen wirklich mit diesem Thema herumgekämpft.
Hier ist meine Analyse und Lösung:

Kurz gesagt, das Problem, das ich zu lösen versuchte:
Ich habe festgestellt, dass der HTML5-Player den Download nicht abbricht, wenn der Player angehalten ist (überhaupt nicht, auch nicht nach einer angemessenen Zeit). Als ich mit einem 24/7-Audiostream arbeitete und eine mobile Website entwickelte, stellte ich fest, dass dies für meine Besucher alles andere als optimal ist, wenn man die hohe Datennutzung bedenkt, wenn sie die Website offen lassen " dieses Problem...
Nur um das zu klären, ich interessiere mich nicht wirklich für Dateien mit fester Länge. Das Herunterladen der vollständigen Datei ist meistens eine Funktion, die zum Anzeigen von Online-Ressourcen (langsame Verbindung) erforderlich ist. Ich habe also nicht versucht, dies zu verhindern.

Analyse:
Das HTML5-Audioelement hat weder eine stop () - Funktion, noch hat es eine Option, mit der Sie die Datenmenge festlegen können, die gepuffert werden darf, oder die Möglichkeit zu sagen, dass das Element die Pufferung stoppen soll. Verwechseln Sie dies nicht mit der 'Preload'-Funktion. Dies gilt nur für das Element, bevor Sie auf die Wiedergabeschaltfläche klicken.
Ich habe keine Ahnung, warum das so ist und warum diese Funktionalität nicht verfügbar ist. Wenn mir jemand erklären kann, warum diese wichtigen Funktionen nicht in einem Standard implementiert sind, der die Webentwicklung für Mobiltelefone besser und standardisierter machen soll, würde ich das gerne erfahren.

Lösung:
Die einzige funktionierende Lösung, die ich gefunden habe, um eine (Art) Stop-Funktion in Ihrem Audio-Element zu implementieren, lautet wie folgt:
1. Anhalten des aktuellen Players - Sie können das Pause-Ereignis auf dem Player über audio.addEventListener ("pause", yourFunction) einbinden.
2. Stellen Sie die Quelle auf leer - audio.src = "";
3. Laden Sie die src - audio.load ();
4. Entfernen Sie das gesamte Audioelement
5. Fügen Sie ein neues HTML5-Audioelement ein, ohne dass die Quelle definiert wurde
6. Legen Sie die Quelle fest (die Quelle, die an erster Stelle vorhanden war) - audio.src = "alte Quell-URL
7. Wiederholen Sie das Pause-Ereignis - audio.addEventListener ('pause', aktuelle Funktion);

Das vollständige Einfügen eines neuen HTML5-Audioplayers ist für iOS erforderlich. Durch das Zurücksetzen der src und das anschließende Laden wird der Player in meinem Fall "Autoplay" ausgeführt.

Für die faulen Leute (einschließlich jQuery):

var audio = $("audio").get(0);
audio.pause(0);
var tmp = audio.src;
audio.src = "";
audio.load();
$("audio").remove();

$("#audio-player").html("<audio controls preload='none'></audio>");<br>
audio = $("audio").get(0);
audio.src = tmp;
audio.addEventListener('pause', current-function);

Wenn Sie auf Pause drücken, verliert Ihr Besucher den aktuellen Ort in der Audio-/Videodatei und startet erneut. Ich habe keine Lösung für dieses Problem. Wenn Sie sich jedoch mit einem Livestream befassen, sollte diese Lösung in Ordnung sein.

Hoffe das hilft.

47
Ruben

Mit preload = "none" erzwinge ich die Zwischenspeicherung nach dem Anhalten des Videos und brach dann die Wiedergabe an der angehaltenen Stelle mit jQuery ab. 

<video id="video_el" src="<video_url>" preload="none" controls="controls" />    

<script>
jQuery(function() {

  var video = jQuery('video').get(0);

  video.addEventListener('pause',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
  });

});
</script>
8
Eric Leroy

Der Schlüsselschritt scheint zu sein, dass notsrc vor dem Aufruf von load() auf einen leeren Wert gesetzt wird. Ich hatte Erfolg so zu tun:

var wasPlaying = !audioPlayer.paused;
audioPlayer.currentTime = 0.0; // Optional -- can be left out for pause
audioPlayer.pause();

if (wasPlaying) { // This prevents the browser from trying to load the entire source
    audioPlayer.load();
}

In Chrome und Firefox unter Win10 wird ein Abbruchereignis ausgelöst. In meinem speziellen Fall war dies erforderlich, um die Sockets zu schließen, die andernfalls unbegrenzt geöffnet bleiben würden, was dazu führte, dass die Anzahl der Verbindungen pro Server überschritten wurde, wobei mehrere Player auf derselben Seite verwendet wurden.

1
Dinfinity

Siehe hier: http://dev.w3.org/html5/spec/video.html#attr-media-preload

Vielleicht könnten Sie preload auf none setzen?

Falls das nicht funktioniert: Könnten Sie die Attribute abrufen, entfernen, ein neues Videoelement einfügen und diesem Element die gespeicherten Attribute zuweisen?

0
thejh

In der Tat können Sie dasselbe tun, indem Sie das src-Attribut als php/aspx -Datei mit einigen Parametern festlegen, um den Dateiinhalt zu lesen und die Daten als äquivalenten Typ abzurufen (z. B. Content-Type: video/mp4). ABER es funktioniert nicht in IE 11 (was für eine Überraschung: D), dann müssen Sie den Trick oben nur für diesen großartigen Browser ausführen.

Benutze das...

<video id="v1" preload="none">
  <source src="video.php?id=24" type="video/mp4">
</video>

An Stelle von...

<video id="v2" preload="none">
  <source src="video-24.mp4" type="video/mp4">
</video>

Als Nachteil können Sie nicht die gesamte Länge des Videos bestimmen, aber um dieses Problem zu lösen, ist das nicht so groß, Sie können diesen Wert in Ihrer Datenbank speichern oder einfach einen weiteren kleinen Trick machen.

Ich habe mit Chrome 32, Firefox 26, Opera 18 und IE 11 das folgende Skript getestet

setInterval(function() {
    var r = [];

    try {
        r.Push(v1.buffered.end(0));
    } catch(e) {
        r.Push('nahh');
    };

    try {
        r.Push(v2.buffered.end(0));
    } catch(e) {
        r.Push('second nahh');
    };

    console.log(r.join(', '));
}, 500);

In meinen localhosts Tests ...

Firefox 26 Nachdem Sie Play gedrückt hatten, pufferte IMMER die gesamte Datei.

IE 11 (unter Berücksichtigung von src="video-24.mp4", da der andere nicht funktioniert) Nachdem Sie die Wiedergabe gedrückt hatten, zwischenspeicherte er IMMER den Dateiblock nach Abschnitt, selbst wenn er angehalten wurde, und ignoriert das preload="none"-Attribut vollständig.

Chrome 32 Funktioniert perfekt (wie bei Opera 18).

0
Nevershowmyface