Angular.js: ngSrc funktioniert nicht ordnungsgemäß mit dem HTML5-Videoquellen-Tag

Ich habe auch ein Problem, aber ich habe das Gefühl, dass das Problem in Angulars ng-repeat liegt.
Wenn ich das Video aus diesem Bereich entferne, wird es einwandfrei abgespielt, andernfalls wird keines der Steuerelemente geladen.

ich auch! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

ich auch.

ich auch! Hilf mir

+1

Ich verwende ng-repeat, um ng-src-Quellen festzulegen, und sie werden beim Laden der Seite korrekt geladen. Wenn das Video jedoch über ng-show ausgeblendet und dann erneut angezeigt wird, werden die Quellen nicht neu geladen (in Chrome).

Ich kann die Beobachtung von sourcec0de bestätigen. Wenn ich die ng-Wiederholung entferne und eine einzelne ng-src-Quelle (oder mehrere ng-src-Quellen) verwende, wird das Video beim erneuten Anzeigen korrekt neu geladen.

Ich habe das gleiche Problem. Schaut sich das gerade jemand an?

Mit oder ohne ng-src , mit oder ohne ng-repeat kann Chrome ein HTML5-Video nach dem Navigieren und dem Zurückkehren zur Seite wiederholt nicht neu laden.

Aus einem sauberen Cache sehe ich 2 Anfragen (die erste Pending ), die zweite mit 206 Partial Content . Wenn ich aktualisiere, wird eine Anfrage mit 304 Not Modified . Wenn ich von der Videoansicht weg navigiere und dann zurückkehre (entweder über einen Link oder über die Schaltfläche "Zurück"), erhalte ich zwei Anfragen für das Video mit einem Status von nur Pending . Einer von diesen hat einen Pantomimentyp video/mp4 (richtig), der andere sagt nur Pending .

Schaut sich jemand dieses Problem überhaupt an ???

Können Sie ein laufendes Beispiel für dieses Problem bereitstellen?
Funktioniert es überhaupt in einigen Browsern?
Haben Sie überprüft, ob Browser das Ändern des Attributs src für HTML5-Videoelemente nach dem Rendern unterstützen?

Entschuldigung, die Beispiel-App ist noch nicht veröffentlicht.
Funktioniert gut in Safari.
Wie oben angegeben, habe ich sowohl die ng-src-Direktive als auch ein fest codiertes src-Attribut mit denselben Ergebnissen verwendet.

Was passiert, wenn Sie den Quellcode mit Straight JQuery ändern?
Ich frage mich, ob dies tatsächlich ein Fehler im Browser ist und nicht AngularJS.

Am 16. Juli 2013 um 22:31 Uhr schrieb Paul Grenier [email protected] :

Entschuldigung, die Beispiel-App ist noch nicht veröffentlicht.
Funktioniert gut in Safari.
Wie oben angegeben, habe ich sowohl die ng-src-Direktive als auch eine fest codierte src verwendet
Attribut mit den gleichen Ergebnissen.

- -
Antworten Sie direkt auf diese E-Mail oder sehen Sie sie sich auf Gi tHubhttps an: //github.com/angular/angular.js/issues/1352#issuecomment -21075654
.

Selbst wenn ich den src nicht ändere (z. B. das Video-src-Attribut fest codiere), tritt das Problem auf. Ich habe keine Möglichkeit, das Problem außerhalb von Angular zu simulieren, da Angular den Inhalt steuert. Ich stimme zu, es kann einfach ein Problem in Chrome sein, aber ich bin mir nicht sicher, wie ich das testen soll.

Was meinst du damit, dass Angular den Inhalt steuert?

Das Problem tritt auf, wenn sich der Inhalt unter Verwendung des Angular-Controllers ändert und eine andere Ansicht geladen wird. Wenn Sie die Schaltfläche "Zurück" oder einen Link zur vorherigen Route verwenden, wird der vorherige Inhalt angezeigt, das Video wird jedoch nicht geladen - jedes Mal. Wenn es sich um ein Angular-Problem handelt, ist es wahrscheinlich nur in Chrome. Ich vermute, dass sich das aggressive Caching von Chrome und die Angular-Methode zum Ändern von Ansichten nicht darauf einigen können, was geladen werden soll.

@ AutoSponge mein Testfall war:
Seite 1 mit einer Schaltfläche, um zu Seite 2 zu gelangen
Seite 2 mit einem Video-Player und einer Schaltfläche, um zu Seite 1 zurückzukehren

Navigieren Sie zu Seite 1 und dann zu Seite 2. Das Video wird korrekt geladen.
Klicken Sie auf die Schaltfläche, um zu Seite 1 zurückzukehren, und gehen Sie dann zu Seite 2. Google Chrome verwendet keine Videojs mehr. Dies liegt daran, dass das videojs-Objekt nicht wie erwartet entfernt wurde, als Angular das Element aus dem DOM entfernte. Dies ist kein Winkeljs (yay!)

Entfernen Sie es, bevor Sie den videojs-Player initialisieren. Ich mache das, weil ich eine Direktive habe, die einen Spieler hinzufügt. Zum Beispiel, wenn in einer Direktive verwendet:

... directive('mydir', ... {
    var vp;
    return {
        link: ..{ 
            if (vp) vp.dispose();
            vp = videojs("mp4video");
        }
    };`

Genau wie beim OP verwende ich kein Wrapper-Objekt. Das Video wird über ein HTML5-Video-Tag geladen. Schlagen Sie vor, dass dies separat entfernt werden sollte?

Nun, VideoJS verfolgt die Spieler, die dem DOM hinzugefügt wurden, aber es sieht so aus, als würde es keine Änderungen beobachten. Wenn Sie das Element aus dem DOM entfernen (z. B. weil Sie zu einer anderen Route navigieren), weiß videoJS es nicht und initialisiert es nicht erneut. Siehe Zeile 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
Wenn Sie es außerhalb von videoJS entfernen, sollten Sie die dispose () -Methode des Players aufrufen. Ich denke, das funktioniert so, als ob Sie ein JQuery-Plugin (?) Umschließen. Dies ist es, was mich denken lässt, dass es kein Winkelproblem ist.

mit diesen Problemen auch.
Das Laden von AV-Dateien in src oder ng-src erledigt den Job nicht. müssen Anweisungen oder Fabriken schreiben, damit es funktioniert.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

Ich habe auch dieses Problem.

Das Video kann in Chrome, Firefox und Safari nicht geladen werden. Es funktioniert jedoch im IE.

Hier ist eine Problemumgehung : http : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Es erzeugt ein unordentliches Flimmern beim Laden der Seite, aber es funktioniert.

+1

Eine Problemumgehung lautet wie folgt:

In Ihrem Controller-Set ist eine Funktion in meinem Fall wie folgt:

    $scope.play = function(who) {
        var name = who.id.split('.')[0];
        $scope.audio.mp3 = name + '.mp3';
        $scope.audio.ogg = name + '.ogg';
        $scope.audio.play = 'views/audio.html?'+name;
    };

dann hatte ich in meinem Fall in meiner Vorlage folgendes:

<div ng-include src="audio.play"></div>

Meine Vorlage in views / audio.html sieht wie folgt aus:

<audio ng-model="audio" controls autoplay >
    <source ng-src="{{audio.mp3}}" type='audio/mp3'></source>
    <source ng-src="{{audio.ogg}}" type='audio/ogg'></source>
</audio>

Wenn sich $ scope.audio.play nicht ändert, wird kein Neuladen durchgeführt. Ich verwende also den Namen der Datei. Dies könnte stattdessen nur eine Zufallszahl sein

@caitp Ich dachte du hättest eine PR dafür, versagt mir mein Gedächtnis?

@IgorMinar Ich wollte daran arbeiten, aber mir wurde klar, dass ich das Problem nicht reproduzieren konnte (siehe http://jsfiddle.net/J77gE/). Ich dachte, es würde Spaß machen, ein Medienhilfemodul statt außerhalb des Kerns mit mehr Bindungsoptionen zu erstellen.

Aber soweit ich das beurteilen kann, funktioniert ng-src gut für Quell-Tags in modernen Browsern und modernen Winkeln

Das Problem, das ich erwähnte, war speziell auf das Ändern der Ansichten und die Verwendung der Zurück-Schaltfläche zurückzuführen. Ich bin nicht sicher, wie diese jsfiddle versucht, das Problem neu zu erstellen.

Es ist nicht so, der Punkt ist, dass wir kein Problem haben, die Quell-Tags zu interpolieren. Ich denke, das ist nicht das Problem. Ich konnte Ihr spezielles Problem überhaupt nicht reproduzieren

@AutoSponge Können Sie bitte eine Demo-App und Anweisungen zur Reproduktion bereitstellen?

http://jsfiddle.net/AutoSponge/Yh9en/

Klicken Sie auf den Link Video. Es wird beim ersten Mal geladen. Klicken Sie erneut auf Startseite und dann auf Video. Innerhalb von 1 oder 2 Klicks wird das Laden in Chrome wahrscheinlich beendet.

(Und urteile nicht, ich habe das basierend auf einer App von vor 8 Monaten zusammengeschmissen!)

@ AutoSponge Dies ist kein

Ich bin damit einverstanden, dass es ein unglückliches Problem mit Chrome ist. Ich denke, das ist der Hauptgrund, warum diese Ausgabe 9 Monate lang offen blieb und nur wenig daran gearbeitet wurde. Halten Sie es für unangemessen, eine Cache-Busting-Option zu erstellen, da Chrome das Problem wahrscheinlich nicht beheben wird? Ich denke, es würde nur eine zufällige Zeichenfolge an die src anhängen.

Ich dachte auch, dass es etwas mit pushState zu tun haben könnte - entweder mit der Implementierung in Chrome oder der Verwendung in Angular. Aber ich dachte ehrlich, dass es jetzt behoben worden wäre.

Ich bin der Meinung, dass dieses spezielle Problem wahrscheinlich zum Chrom-Issue-Tracker gehört (ich denke, es sind bereits einige Probleme mit dem HTMLMediaElement-Cache offen, daher lohnt es sich, dort darüber zu sprechen).

Ich kann mich nicht erinnern, aber es ist möglich, dass dies das erwartete Verhalten ist, das in der Spezifikation definiert ist (und es wäre nicht das erste Mal, dass die Spezifikation nach seltsamen / unglücklichen Verhaltensweisen fragt).

Dies mag von dem Problem, das ich hatte, getrennt sein, aber ich hatte ein Problem, bei dem

Hoffe das war etwas verständlich und verwandt!

Ich habe gerade eine Problemumgehung herausgefunden. Es funktioniert für Chrome, aber nicht für andere Browser (in einigen Fällen immer wieder usw.) :)
Letzter Kommentar in
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

Als weitere Anmerkung stellt die HTML5-Spezifikation fest, dass das src-Attribut von a dynamisch geändert wirdTag hat keine Auswirkung, macht aber dasselbe für das src-Attribut von

Nach einigem googeln stellte ich fest, dass dies höchstwahrscheinlich damit zusammenhängt, dass Chrome darauf wartet, dass verfügbare Sockets nicht eckig sind, und dass das Hinzufügen von Preload = "none" zum Video-Tag das Problem zu beheben schien.

Problemumgehung

in der Steuerung

$scope.mp3 = "http://download.jw.org/audio.mp3"

$scope.$watch('mp3', function() {
       $("audio").attr("src",$scope.mp3)
   });

html:

<audio id="mejs" type="audio/mp3" controls="controls"></audio>

@agliottone Ihre vorgeschlagene

@btford 1 stimme aber zu ..
Er widmete den Letzten die Bösen, ihr Ende der Heilmittel

+1

Ich denke, jedes Mal, wenn eine neue Quelle festgelegt wurde, müssen Sie .load() für das native Videoelement erneut aufrufen, damit die neue Videoquelle angezeigt wird.

Hallo, ich habe ein Problem mit angleJS in Google Chrome, wenn ich die Seite beim ersten Laden des HTML 5-Videos lade, aber wenn ich die Ansicht mit ng-view ändere, wird sie nicht geladen, aber in Firefox, einem Internet Explorer, funktioniert sie sehr gut.

Ich weiß nicht, was ich dagegen tun muss!

Dies sieht aus wie ein ähnliches Problem wie <embed> und ngSrc . Siehe # 339

Dies muss behoben werdenddddddddd :(

Ich habe ein plnkr geschrieben
Klicken Sie auf das Video, das Video wird geladen. Klicken Sie auf einen anderen Link und dann zurück zum Video. Das Video steht noch aus. Sie können die Anfragen in Chrome network . Zwei Anfragen, eine ist die vorherige, bekommen noch. Ein anderer ist neu und steht noch aus.

@kaiqigong Ich habe es letzte Woche zum

http://plnkr.co/edit/CL0Lh6VGMy0M3mR1SvVA?p=preview

Ich habe Ihr plnkr gegabelt und es geändert, um die URL festzulegen und ihr zu vertrauen:

   .controller('VideoController', function($scope, $sce, $routeParams){
        $scope.name = "VideoController";
        $scope.params = {
          videoUrl: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.mp4")
        };
   })

Das Video hat eine Verzögerung, aber es funktioniert für mich.

@ Phillip-Haydon, danke für deine Antwort.
Ich habe Ihr plnkr ausprobiert, aber es funktioniert immer noch nicht richtig. (Versuchen Sie schnell zwischen den Links zu wechseln.)
Ich habe festgestellt, dass der Browser beim Entfernen des Video-Tags (durch Ändern der Route oder anderer DOM-Vorgänge) immer noch die Videoquelle abruft. Wenn wir zurück zum Video wechseln. Eine weitere Videoanforderung wird gestellt, wodurch der Netzwerkverkehr gestört wird.
Wenn ich vor dem Entfernen des Video-Tags src für Video auf '' setze, hört der Browser auf zu ziehen, wodurch das Problem behoben wird. Bitte versuchen Sie diesen Codepen: http://codepen.io/cagegong/pen/bJHAz

Also meine endgültige Lösung:

$scope.$on '$destroy', () ->
  angular.element('video').attr 'src', ''

Ja, meine funktioniert, nur nicht zu 100%. Warum der Browser die Anfrage selbst nicht beendet, wenn das dom-Element, das sie anfordert, zerstört wird, weiß ich nicht. Ich glaube nicht, dass Angular selbst damit umgehen muss.

Es ist interessant zu sehen, dass das Setzen einer leeren Zeichenfolge die Anforderung beendet, obwohl ich möglicherweise etwas einrichten muss, um dies in meinem Projekt hinzuzufügen. Vielen Dank.

@ Jharaujoads
Hoffe das löst dein Problem

: +1:

Wow, zwei Jahre und nichts. Wird der Winkel überhaupt beibehalten?

Angular ist die Zeit und Mühe nicht wert. Sie haben der Community bereits mit Angular 2.0 "fuck you" gesagt.

@IDontEatSoap Ich bin mir nicht sicher, warum Sie diese Frage stellen. Überprüfen Sie einfach die Liste der Commits und Releases . Angesichts einer wöchentlichen Neuerscheinung und weniger Commits an einem Tag, einschließlich Wochenenden, scheint es mir ziemlich gepflegt zu sein ...

@ phillip-haydon Bitte halten Sie den Gesprächspartner und konzentrieren Sie sich auf technische Angelegenheiten. Sie verstoßen gegen unseren Verhaltenskodex .

@IDontEatSoap @ phillip-haydon Wenn Sie wirklich daran interessiert sind, dass dieses Problem behoben wird, können Sie am besten eine Pull-Anfrage mit Codeänderungen senden, damit die Zukunft in allen Browsern funktioniert.

Und doch wird ein einfaches Video-src-Tag nicht unterstützt?

Ich habe es geschafft, es zum Laufen zu bringen, indem ich $ sde verfügbar gemacht und src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}" verwendet habe.

Versteh mich nicht falsch, ich mag es wirklich eckig. Aber kleine Dinge wie Video-src- und SVG-Tags, die nicht unterstützt werden und Problemumgehungen erfordern, sind unerwartet.

Mach weiter so :): +1:

+1, es ist unmöglich, eine Livestream-Webcam mit dynamischen Daten hinzuzufügen.

@ pkozlowski-opensource Ich bin nicht mehr interessiert, weil ich Angular jetzt nicht mehr mag, da du die Community für V2 verlassen hast. Es macht keinen Sinn, Mühe damit zu verschwenden.

@ Phillip-Haydon Vielen Dank für diese Informationen. Ich habe gerade nach Frontend Frameworks gesucht, die mit node.js verwendet werden können. Ich hatte noch nie von dem V2-Problem gehört. Ich und mein Team haben uns für React.js entschieden, da sie die Kompatibilität zwischen V1 und V2 beeinträchtigen. Sie denken, die große Kluft, die diese Art des Denkens in der Python-Community verursacht hat, hätte jedem eine Lektion erteilt.

:enttäuscht:

@ phillip-haydon und @StevenDStanton - Es tut mir leid zu hören, dass Sie sich für ein anderes Framework entschieden haben, aber natürlich müssen Sie die Tools auswählen, die für Ihre eigene Entwicklung am besten geeignet sind.

Um ganz klar zu sein, AngularJS hat die Community nicht verlassen, tatsächlich war die Community noch mehr denn je an der Weiterentwicklung von Angular 1.x beteiligt. Wir stehen kurz vor der Veröffentlichung von AngularJS 1.4.0, der kürzesten Zeit zwischen großen Versionsänderungen und mehr Community-Mitgliedern im Kernteam als jemals zuvor. Sobald diese Version veröffentlicht ist, werden wir mit der Entwicklung zu AngularJS 1.5 beginnen, das (bei gleichen Bedingungen) noch lange vor Ende 2015 veröffentlicht werden sollte. Denken Sie auch daran, dass Google selbst buchstäblich Hunderte von AngularJS 1.x-Anwendungen verwendet jetzt sofort. Es liegt im Interesse von Google, sicherzustellen, dass diese Anwendungen, genau wie Ihre Anwendungen, weiterhin einen Lebens- oder Migrationspfad haben.

In Bezug auf Angular 2 - dieser Entwicklungsaufwand basiert genau auf dem Feedback der Community. Ziel ist es, ein schnelleres, kleineres und robusteres Framework bereitzustellen, das größere, komplexere Anwendungen unterstützen kann. bessere Leistung auf Mobilgeräten; und die Entwicklung von Webbrowsern mit transparenter Unterstützung für Webkomponenten weiter voranzutreiben.

Um dies zu erreichen, war es nicht möglich, die Dinge weiter auf AngularJS 1.x zu schrauben, da wir einige der grundlegenden Bausteine ​​überdenken mussten, wie z. B. die Funktionsweise des Injektors und des Compilers. Das Ergebnis ist ein völlig neues Framework, das weiterhin die gleichen hochrangigen Ziele verfolgt, die AngularJS so populär und zuverlässig gemacht haben, wie es geworden ist, aber auch in den kommenden Jahren einen zukunftssicheren Weg bieten kann.

Möglicherweise gibt es keine schlüsselfertige Upgrade-Lösung für die Migration von AngularJS 1.x auf Angular 2. Die Migration von AngularJS 1.x auf Angular 2 ist jedoch sicherlich einfacher als die Migration von AngularJS 1.x auf ein völlig anderes Framework.

Es scheint mir, dass der Browser das <source> -Element nicht sehr gut auf Änderungen seines src -Attributs überwacht. Die Ausgabe des Originalplakats kann mit ng-if .

Siehe http://plnkr.co/edit/rpiEg1ki7KXgD40zy8qV

Ich benutze nur

        $timeout(function () {
            $("video source").attr("src", 'https:' + file.url);
            $("video").attr("src", 'https:' + file.url);
        }, 500);

@ tot-ra - Ich glaube, Ihre Version funktioniert, weil der Browser die Änderung des Attributs src für das Element <video> beobachtet, wie hier zu sehen ist: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

Aus der HTML5-Spezifikation: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

Das dynamische Ändern eines Quellelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das src-Attribut direkt für das Medienelement und verwenden Sie möglicherweise die canPlayType () -Methode, um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Bearbeiten von Quellelementen nach dem Analysieren des Dokuments ein unnötig komplizierter Ansatz.

Dies bedeutet, dass Sie nicht erwarten können, dass der Browser mit AngularJS (oder irgendetwas anderem) fertig wird, wenn die Quellelemente dynamisch geändert werden. Statt dessen, was wir brauchen , ist einige Medien spezifische Richtlinien , die mit der Aktualisierung der Deal wird <video> - Tag des src Eigenschaft , wenn angemessen. Vielleicht etwas in Anlehnung an die ng-media- Bibliothek von @caitp .

In Bezug auf das Problem mit dem Antrag für ein Video nicht abgebrochen werden, schlage ich vor, dass wir so etwas wie @kaiqigong ‚s Idee umsetzen könnten https://github.com/angular/angular.js/issues/1352#issuecomment -58865425. Vielleicht könnten wir eine video -Element-Direktive hinzufügen, die ihre src auf "" wenn das Element zerstört wird?

Andere potenzielle Bibliotheken, die ausprobiert werden könnten:

• ngVideo
• videogular

Abmelden. AngularJS für die Reaktion verlassen. Sorry Leute, aber danke für deine harte Arbeit.

Ja, gute Idee, ich melde mich auch ab. Ich habe AngularJS für http://aurelia.io/ über Bord

Zurück zum technischen Problem:

In dieser Ausgabe werden tatsächlich zwei Probleme behandelt:

• Das Element <video> überwacht oder reagiert nicht auf Änderungen des Attributs src auf <source> -Tags. Dies ist Teil der HTML5-Spezifikation und wird sich in naher Zukunft wahrscheinlich nicht ändern. Dies bedeutet, dass wir die idiomatische AngularJS-Methode zur dynamischen Angabe von <source> -Elementen mit oder ohne ngSrc . Mit anderen Worten, wir können einfach keine Interpolation im <source> -Tag des src -Attributs verwenden, da das <video> -Element die Änderung nicht aufnimmt.
• In einigen Fällen (Browsern) bricht das <video> -Element seine Anforderung zum korrekten Herunterladen eines Videos nicht ab, dann wird das Element aus dem DOM entfernt. Dies hat zur Folge, dass Sie, wenn Ihre Anwendung das DOM schnell genug ändert und <video> Tags hinzufügt und entfernt, sodass das Video keine Zeit zum Herunterladen hatte, in einer Situation stecken bleiben können, in der ein neues <video> element versucht, auf ein Video zuzugreifen, das noch von einem zuvor zerstörten <video> -Element aussteht. Es scheint, dass der Browser die Videoanforderung tatsächlich abbricht, wenn das Attribut src (oder currentSrc ?) Auf die leere Zeichenfolge ( "" ) gesetzt wird, bevor das Element zerstört wird .

Keines dieser Probleme ist per se ein Fehler in AngularJS. Das heißt aber nicht, dass wir nichts dagegen tun können.

Zum ersten Problem:
Die einzige Möglichkeit, dies in Angular oder einem anderen Framework zu beheben, besteht darin, JavaScript zu schreiben, um mit den sich dynamisch ändernden Quellen umzugehen, wie in der HTML5-Spezifikation beschrieben. Ich habe in keinem der anderen wichtigen Frameworks eine Lösung dafür gesehen, aber in AngularJS ist der attraktivste Weg, eine Reihe von Richtlinien zu erstellen. Dies ist effektiv das, was die Leute in den folgenden Projekten versucht haben:

• ngMedia
• ngVideo
• videogular

Abhängig vom Interesse der Community könnten wir versuchen, etwas Ähnliches für Angular 1.5 zu entwickeln und es als eigenes Modul zu verpacken (ähnlich wie ngCookies verpackt ist). Lassen Sie uns dies bei der Planung von 1.5 noch einmal überprüfen. In der Zwischenzeit besteht die beste Lösung darin, eine der oben genannten Bibliotheken zu implementieren und ihnen zu helfen, dass ihre Bibliothek für Sie funktioniert.

Zum zweiten Problem:
Ich scheine im Moment nicht in der Lage zu sein, dies persönlich zu reproduzieren. In meinem Chrome wird das vorherige <video> -Elementvideo tatsächlich weiter gestreamt, selbst nachdem wir das Element zerstört haben, was nach einigem Hin- und Herwechseln dazu führt, dass zahlreiche Anforderungen parallel ausgeführt werden, aber diese Anforderungen scheinen dies nicht zu tun Verhindern Sie, dass das Video des neuen Elements <video> geladen wird.

Hier sehen Sie die mehreren gleichzeitigen Video-Downloads.

Ich glaube, dass dies wirklich ein Fehler im Browser ist, aber in der Zwischenzeit können Sie dies umgehen, indem Sie Ihre eigene video -Direktive bereitstellen (siehe http://plnkr.co/edit/QLMJd24rxvklr638e57Q?p=preview). ::

  .directive('video', function() {
    return {
      restrict: 'E',
      link: function(scope, element) {
        scope.$on('$destroy', function() {
          element.prop('src', '');
        });
      }
    };
  })

Hier können Sie sehen, dass der Video-Download jetzt beendet wird, wenn wir von der Videoansicht weg navigieren.

Derzeit ist dies die empfohlene Problemumgehung für dieses Problem.

@petebacondarwin ... window.stop() wurde jedes weitere Netzwerk-Streaming für mich abgebrochen.

Letztendlich ist es nicht das Idealste, wenn Sie andere Ressourcen benötigen, aber es bietet ein gewisses Maß an Problemumgehung.

@daleyjem danke für diese Idee.
Wir können dies in einer Kernanweisung nicht tun, da dies das Streaming anderer Videos verhindern würde.

Erstellen Sie einfach einen Filter:
app.filter ("trustUrl", ['$ sce', Funktion ($ sce) {
Rückgabefunktion (RecordingUrl) {
return $ sce.trustAsResourceUrl (RecordingUrl);
};
}]);

In Ansichtsdatei:
<audio src = "{{Your_URL | trustUrl}}" Audioplayer steuert> Audio>

HINWEIS: Beachten Sie den Platz im Audio-Tag

Hallo, ich bin der Schöpfer von Videogular.

Wie @petebacondarwin erklärte, ist dies kein Problem mit AngularJS, sondern hauptsächlich ein Problem der Funktionsweise von Videos in HTML5 und des Umgangs der Browser mit Videoanfragen. Und es wird noch seltsamer, wenn es auf mobilen Geräten funktionieren muss.

Ich habe viel mit Video und HTML5 mit Videogular gekämpft und ich muss sagen, dass es schwierig ist, es nahtlos in allen Browsern zum Laufen zu bringen, aber nicht unmöglich.

Wenn also jemand im AngularJS-Team Hilfe dazu benötigt, würde ich gerne mein bescheidenes Wissen darüber teilen und dazu beitragen, es zu beheben. Dies ist etwas, das mich wirklich nervt und in Angular 2 habe ich keine Probleme damit, daher wäre es großartig, in beiden Frameworks einen ähnlichen Ansatz zu haben.

+1

Wenn Ihr Videoplayer eine Direktive enthält, können Sie die URL-Variable src anzeigen und manuell aktualisieren:

link: function (scope, element, attrs) {
    var video = element.find('video')[0];
    scope.$watch('source.url', function (val) {
        video.src = val;
    });
}

Nach einer Menge Versuch und Irrtum kann ich Videos endlich zuverlässig auf Android 4.2.2, 4.3, 4.4.4, 5.0.0 und 5.1.0 wiedergeben. Installieren Sie Crosswalk und verwenden Sie Videogular

Mit einer benutzerdefinierten Direktive behoben

<source ng-repeat="source in sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>


//Html5 video fix
eshop.directive('html5vfix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            attr.$set('src', attr.vsrc);
        }
    }
});

İ URL-Video in Datenbank mit json analysieren, aber nicht funktionieren (((bitte helfen Sie)

Wenn ich auf meine Wiedergabetaste klicke, wird das Video verkehrt herum angezeigt, und wenn ich auf Vollbild drücke, wird jeder Vorschlag zu diesem Problem an seine Position gebracht

+1 Es gibt kein Parsen der URL, sei es mit src oder ngSrc.
Wurde dieser Fehler abgebrochen?

Ich habe das gleiche Problem, es gab noch eine Lösung

Diese Lösung funktioniert sehr gut.

http://www.rubencanton.com/blog/2014/07/adding-video-src-with-angular.html