Angular.js: ngSrc no funciona correctamente con la etiqueta de fuente de video HTML5

También estoy teniendo un problema, sin embargo, creo que el problema reside en Angulars ng-repeat.
Si elimino el video de ese alcance, se reproduce bien; de lo contrario, ninguno de los controles se cargará.

¡Yo también! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Yo también.

¡Yo también! ayúdame

+1

Estoy usando ng-repeat para configurar las fuentes ng-src y se cargan correctamente al cargar la página, pero si el video se oculta a través de ng-show y luego se muestra nuevamente, las fuentes no se recargan (en Chrome).

Puedo confirmar la observación de sourcec0de: si elimino ng-repeat y uso una sola fuente ng-src (o varias fuentes ng-src), el video se recarga correctamente al volver a mostrarlo.

Estoy teniendo el mismo problema. ¿Alguien está investigando esto actualmente?

Con o sin ng-src , con o sin ng-repeat , Chrome falla repetidamente al volver a cargar un video HTML5 después de navegar y volver a la página.

Desde un caché limpio, veo 2 solicitudes (la primera Pending ), la segunda con 206 Partial Content . Si actualizo, veo una solicitud con 304 Not Modified . Cuando salgo de la vista de video y luego regreso (ya sea a través de un enlace o usando el botón de retroceso), recibo dos solicitudes para el video con solo un estado Pending . Uno de estos tendrá un tipo mimo video/mp4 (correcto), el otro solo dice Pending .

¿Alguien está mirando este tema ???

¿Puede proporcionar un ejemplo de ejecución de este problema?
¿Funciona en algunos navegadores?
¿Ha verificado si los navegadores admiten cambiar el atributo src en elementos de video HTML5 después de la renderización?

Lo sentimos, la aplicación de ejemplo aún no está publicada.
Funciona bien en Safari.
Como se indicó anteriormente, utilicé tanto la directiva ng-src como un atributo src codificado de forma rígida con los mismos resultados.

¿Qué sucede si cambia el src con jQuery directo?
Me pregunto si esto es realmente un error en el navegador en lugar de AngularJS.

El 16 de julio de 2013 a las 22:31, Paul Grenier [email protected] escribió:

Lo sentimos, la aplicación de ejemplo aún no está publicada.
Funciona bien en Safari.
Como se indicó anteriormente, utilicé tanto la directiva ng-src como un src codificado de forma rígida
atributo con los mismos resultados.

-
Responda a este correo electrónico directamente o véalo en Gi
.

Incluso si no estoy cambiando el src (por ejemplo, codificar el atributo video src), el problema ocurre. No tengo una forma de simular el problema fuera de Angular ya que Angular controla el contenido. Estoy de acuerdo, puede ser simplemente un problema en Chrome, pero no estoy seguro de cómo probarlo.

¿Qué quieres decir con que Angular controla el contenido?

El problema ocurre cuando, usando el controlador de Angular, el contenido cambia, cargando otra vista. Al usar el botón Atrás o un enlace a la ruta anterior, se muestra el contenido anterior, pero el video no se carga, todo el tiempo. Si se trata de un problema angular, probablemente solo esté en Chrome. Supongo que el almacenamiento en caché agresivo de Chrome y el método de Angular para cambiar las vistas no pueden ponerse de acuerdo sobre lo que se debe cargar.

@AutoSponge mi caso de prueba fue:
página 1 con un botón para ir a la página 2
página 2 con un reproductor de videojs y un botón para volver a la página 1

navegue a la página 1, luego a la página 2, el video se cargó correctamente.
haga clic en el botón para volver a la página 1, luego vaya a la página 2, google chrome deja de usar videojs. esto sucede porque el objeto videojs no se eliminó cuando angular eliminó el elemento del DOM, como se esperaba. esto no es un angularjs (¡yay!)

Elimínelo antes de inicializar el reproductor videojs. Hago esto porque tengo una directiva que agrega un jugador. Por ejemplo, si se usa en una directiva:

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

Al igual que el OP, no estoy usando un objeto contenedor. El video se carga a través de una etiqueta de video HTML5. ¿Está sugiriendo que debería eliminarse por separado?

Bueno, videoJS realiza un seguimiento de los jugadores agregados al DOM, pero parece que no está viendo los cambios. Si elimina el elemento del DOM (por ejemplo, porque navega a otra ruta), videoJS no lo sabrá y no lo inicializará nuevamente. ver línea 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
si lo elimina fuera de videoJS, supongo que debería llamar al método dispose () del reproductor. Supongo que esto funciona como cuando envuelve un complemento de jquery (?). Esto es lo que me hace pensar que no es un problema angular.

teniendo estos problemas también.
cargar archivos AV en src o ng-src no hace el trabajo. Necesito escribir directivas o fábricas para que funcione.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

Yo también tengo este problema.

El video no se carga en Chrome, Firefox y Safari. Sin embargo, funciona en IE.

Aquí hay una solución : http : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Crea un parpadeo desordenado en la carga de la página, pero funciona.

+1

una solución alternativa es la siguiente:

en su controlador, establezca una función en mi caso es así:

    $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;
    };

entonces en mi caso en mi plantilla tuve lo siguiente:

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

mi plantilla en views / audio.html se ve de la siguiente manera:

<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>

si $ scope.audio.play no cambia, entonces no se volverá a cargar, así que estoy usando el nombre del archivo, esto podría ser un número aleatorio en su lugar

@caitp Pensé que tenías un PR para esto, ¿me está fallando la memoria?

@IgorMinar Iba a trabajar en ello, pero me di cuenta de que no podía reproducir el problema (ver http://jsfiddle.net/J77gE/). Pensé que sería divertido construir un módulo auxiliar de medios en lugar de fuera del núcleo con más opciones de enlace.

Pero por lo que puedo decir, ng-src funciona bien para las etiquetas de origen en los navegadores modernos y angulares modernos

El problema que mencioné se debió específicamente al cambio de vistas y al uso del botón Atrás. No estoy seguro de cómo ese jsfiddle intenta recrear el problema.

No es así, el punto es que no tenemos ningún problema al interpolar las etiquetas de origen, creo que este no es el problema. No he podido reproducir su problema en particular en absoluto.

@AutoSponge, ¿ puede proporcionar una aplicación de demostración e instrucciones sobre cómo reproducir esto, por favor?

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

Haga clic en el enlace Video. Se cargará la primera vez. Haga clic en Inicio y luego en Video nuevamente. En 1 o 2 clics probablemente dejará de cargarse en Chrome.

(¡Y no juzgues, hice esto en base a una aplicación de hace 8 meses!)

@AutoSponge, esto no es un problema angular. Es un comportamiento extraño de Chrome, pero aún está interpolando su archivo fuente y obteniendo el src correcto. Parece ser un problema con el almacenamiento en caché, lo cual es un poco desafortunado. (también tiene este problema con ngIf, pero esto puede evitarse usando ngShow + configurando el volumen en 0)

Estoy de acuerdo en que es un problema desafortunado con Chrome. Creo que esa es la razón principal por la que este problema permaneció abierto durante 9 meses con poco trabajo en él. Dado que es poco probable que Chrome lo solucione, ¿cree que no es razonable crear una opción de eliminación de caché? Estoy pensando que solo agregaría una cadena aleatoria al src.

También pensé que podría tener algo que ver con pushState, ya sea la implementación en Chrome o su uso en Angular. Pero honestamente pensé que ya estaría arreglado.

Siento que este problema en particular probablemente pertenece al rastreador de problemas de cromo (creo que hay un par de problemas relacionados con la caché de HTMLMediaElement ya abiertos, por lo que valdría la pena hablar de ello allí).

No lo recuerdo, pero es posible que este sea el comportamiento esperado definido en la especificación (y no sería la primera vez que la especificación solicita comportamientos extraños / desafortunados)

Esto puede ser independiente del problema que he tenido, pero tuve un problema en el que

¡Espero que haya sido algo inteligible y relacionado!

Acabo de descubrir una solución. Funciona para Chrome, pero no para otros navegadores (en algunos casos, una y otra vez, etc.) :)
Último comentario en
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

Como otra nota, la especificación HTML5 señala que modificar dinámicamente el atributo src de unetiqueta no tendrá ningún efecto, pero hacer lo mismo en el atributo src de un

Después de buscar un poco en Google, descubrí que esto probablemente esté relacionado con Chrome esperando que los sockets disponibles no sean angulares, y que agregar preload = "none" a la etiqueta de video parecía solucionar el problema.

solución alterna

en el controlador

$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, la solución alternativa sugerida utiliza malas prácticas. Nunca debería escribir en el DOM desde un controlador como ese. Considere usar una directiva personalizada.

@btford 1 de acuerdo pero ...
Él dedicó los últimos a los malvados, los fines de los remedios

+1

Creo que cada vez que se establece una nueva fuente, debe llamar a .load() en el elemento de video nativo nuevamente para que aparezca la nueva fuente de video.

Hola, tengo un problema con angularJS en Google Chrome cuando cargo la página la primera vez que se carga el video HTML 5, pero cuando cambio la vista con ng-view no se carga, pero en Firefox un explorador de Internet funciona muy bien.

¡No sé qué tengo que hacer al respecto!

Esto parece un problema similar a <embed> y ngSrc . Ver # 339

Esto necesita ser arregladoddddddd :(

He escrito un plnkr
haga clic en el video, el video se carga. Haga clic en otro enlace y luego vuelva al video. El video está pendiente. Puede ver las solicitudes en Chrome network . Dos solicitudes, una es la anterior, todavía se está recibiendo. Otro es nuevo, pendiente.

@kaiqigong Lo

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

Bifurqué su plnkr y lo modifiqué para establecer la URL y confiar en él:

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

Hay un retraso en el video, pero me está funcionando.

@ phillip-haydon gracias por tu respuesta.
Probé su plnkr, pero todavía no funciona correctamente. (Intente cambiar rápidamente entre enlaces).
Lo que encontré es que, cuando eliminamos la etiqueta de video (cambiando la ruta o algunas otras operaciones DOM), el navegador todavía está extrayendo la fuente de video. Cuando volvamos al video. Se realiza otra solicitud de video que atasca el tráfico de la red.
Si configuro el src del video en '' antes de eliminar la etiqueta de video, el navegador dejará de tirar, lo que resuelve el problema. Pruebe este codepen: http://codepen.io/cagegong/pen/bJHAz

Entonces mi solución final:

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

Sí, el mío funciona, pero no al 100%, no tengo idea de por qué el navegador no elimina la solicitud cuando el elemento dom que lo solicita se destruye. No creo que esto sea algo que se deba exigir a Angular.

Es interesante ver que configurarlo en una cadena vacía mata la solicitud, aunque podría tener que configurar algo para agregar eso en mi proyecto. Gracias.

@jharaujoads
Espero que esto resuelva tu problema

: +1:

Vaya, dos años y nada. ¿Se mantiene angular en absoluto?

Angular no vale la pena el tiempo y el esfuerzo. Ya le dijeron "vete a la mierda" a la comunidad con Angular 2.0.

@IDontEatSoap No estoy seguro de por qué confirmaciones y lanzamientos . Dado un nuevo lanzamiento cada semana y pocas confirmaciones _ un día_, incluidos los fines de semana, me parece que prácticamente se mantiene ...

@ phillip-haydon, mantenga la conversación profesional y centrada en los asuntos técnicos, está violando nuestro código de conducta .

@IDontEatSoap @ phillip-haydon si está realmente interesado en que se aborde este problema, la mejor manera de avanzar es enviar una solicitud de extracción con cambios de código que hagan que el futuro funcione en todos los navegadores.

¿Y sin embargo, no se admite una etiqueta src de video simple?

Me las arreglé para que funcione exponiendo $ sde y usando src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"

No me malinterpretes, me gusta mucho el angular. Pero cosas pequeñas como video src y etiquetas SVG que no son compatibles y requieren soluciones son inesperadas.

Sigan con el buen trabajo :): +1:

+1, imposible agregar una cámara web de transmisión en vivo con datos dinámicos.

@ pkozlowski-opensource Ya no estoy interesado porque no me importa Angular ahora que ha abandonado la comunidad por V2. No tiene sentido desperdiciar esfuerzos en eso.

@ phillip-haydon Gracias por esa información. Solo estaba buscando Frontend Frameworks para usar con node.js. No había oído hablar del problema de V2 antes. Mi equipo y yo hemos decidido ir con React.js debido a que están rompiendo la compatibilidad entre V1 y V2. Crees que la gran brecha que este tipo de pensamiento causó en la comunidad de Python les habría enseñado a todos una lección.

:decepcionado:

@ phillip-haydon y @StevenDStanton : lamento saber que ha elegido otro marco, pero, por supuesto, debe elegir las herramientas que mejor funcionen para su propio desarrollo.

Sin embargo, para ser claros, AngularJS no ha abandonado la comunidad, de hecho, la comunidad ha estado involucrada incluso más que nunca en el desarrollo continuo de Angular 1.x. Estamos cerca de lanzar AngularJS 1.4.0, que será el tiempo más corto entre los grandes cambios de versión hasta ahora y ha tenido más miembros de la comunidad trabajando en el equipo central que nunca. Una vez que se lance esta versión, comenzaremos el desarrollo hacia AngularJS 1.5, que debería (en igualdad de condiciones) ser lanzado mucho antes de finales de 2015. Recuerde también que Google tiene literalmente cientos de aplicaciones de AngularJS 1.x de uso de producción en funcionamiento ahora mismo. A Google le interesa garantizar que estas aplicaciones, al igual que sus aplicaciones, continúen teniendo una vida útil o una ruta de migración.

Con respecto a Angular 2, este esfuerzo de desarrollo está impulsado precisamente por los comentarios de la comunidad. El objetivo es proporcionar un marco más rápido, más pequeño y más robusto que pueda admitir aplicaciones más grandes y complejas; para funcionar mejor en dispositivos móviles; y continuar adoptando la evolución de los navegadores web con soporte transparente para componentes web.

Para lograr esto, no fue posible continuar atornillando cosas en AngularJS 1.x, ya que necesitábamos repensar algunos de los bloques de construcción fundamentales, como cómo funcionan el inyector y el compilador. El resultado es un marco completamente nuevo que continúa impulsando los mismos objetivos de alto nivel que hicieron que AngularJS fuera tan popular y confiable como se ha vuelto, pero también puede proporcionar una ruta a prueba de futuro en los próximos años.

Es posible que no haya una solución de actualización llave en mano para migrar de AngularJS 1.xa Angular 2, eso es cierto. Pero ciertamente será más fácil migrar de AngularJS 1.xa Angular 2 que migrar de AngularJS 1.xa un marco completamente diferente.

Me parece que el navegador no es muy bueno para observar el elemento <source> busca de cambios en su atributo src . El problema del póster original se puede solucionar usando ng-if .

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

Solo estoy usando

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

@ tot-ra: creo que su versión funciona porque el navegador observa el cambio en el atributo src en el elemento <video> como se puede ver aquí: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

De la especificación HTML5: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

Modificar dinámicamente un elemento fuente y su atributo cuando el elemento ya está insertado en un elemento de video o audio no tendrá ningún efecto. Para cambiar lo que se está reproduciendo, simplemente use el atributo src en el elemento multimedia directamente, posiblemente haciendo uso del método canPlayType () para elegir entre los recursos disponibles. Generalmente, manipular los elementos de origen manualmente después de analizar el documento es un enfoque innecesariamente complicado.

Lo que esto significa es que no puede esperar que el navegador haga frente a AngularJS (o cualquier otra cosa) cambiando los elementos de origen dinámicamente. En cambio, lo que necesitamos son algunas directivas específicas de medios que se ocupen de actualizar la propiedad <video> etiqueta src cuando sea apropiado. Quizás algo parecido a la biblioteca ng-media de @caitp .

En cuanto al problema con la solicitud de un vídeo no se cancela, le sugiero que podríamos poner en práctica algo así como @kaiqigong idea 's en https://github.com/angular/angular.js/issues/1352#issuecomment -58865425. ¿Quizás podríamos agregar una directiva de elemento video que establezca su src en "" cuando su elemento esté siendo destruido?

Otras bibliotecas potenciales que podrían probarse:

• ngVideo
• videogular

Darse de baja. Dejando AngularJS para React. Lo siento chicos, pero gracias por su arduo trabajo.

Sí, buena idea, también me daré de baja. He abandonado AngularJS por http://aurelia.io/

Así que volvamos al problema técnico en cuestión:

En realidad, hay dos problemas que se discuten en este número:

• El <video> elemento no controla y no reacciona a los cambios en el src atributo en <source> etiquetas. Esto es parte de la especificación HTML5 y, por lo tanto, es poco probable que cambie en un futuro próximo. Esto significa que no podemos usar la forma idiomática de AngularJS de especificar dinámicamente <source> elementos, con o sin ngSrc . En otras palabras, simplemente no podemos usar la interpolación en el atributo <source> etiqueta src porque el elemento <video> no recogerá el cambio.
• En algunos casos (navegadores), el elemento <video> no cancela su solicitud para descargar un video correctamente, luego el elemento se elimina del DOM. El efecto de esto es que si su aplicación cambia el DOM lo suficientemente rápido, agregando y eliminando etiquetas <video> , de modo que el video no haya tenido tiempo de descargarse, puede quedarse atascado en una situación en la que un nuevo <video> elemento <video> previamente destruido. Parece que el navegador cancelará la solicitud de video si el atributo src (o currentSrc ?) Se establece en la cadena vacía ( "" ) antes de que se destruya el elemento. .

Ninguno de estos problemas es un error en AngularJS per se. Pero eso no significa que no podamos hacer algo al respecto.

Respecto al primer problema:
La única forma de solucionar esto, en Angular o en cualquier otro marco, es escribir JavaScript para lidiar con las fuentes que cambian dinámicamente, como se describe en la especificación HTML5. No he visto una solución a esto en ninguno de los otros marcos principales, pero en AngularJS la forma más atractiva es creando un conjunto de directivas. Esto es efectivamente lo que han intentado hacer las personas en los siguientes proyectos:

• ngMedia
• ngVideo
• videogular

Dependiendo del interés de la comunidad, podríamos considerar desarrollar algo similar a esto para Angular 1.5 y empaquetarlo como su propio módulo (similar a cómo se empaqueta ngCookies ). Revisemos esto cuando hagamos la planificación 1.5. Mientras tanto, la mejor solución es implementar una de las bibliotecas anteriores y ayudarlos a hacer que su biblioteca funcione para usted.

Respecto al segundo problema:
Parece que no puedo reproducir esto personalmente en este momento. En mi Chrome, de hecho continúa transmitiendo el video anterior de <video> elementos incluso después de haber destruido el elemento, que después de algunos cambios de ida y vuelta resulta en numerosas solicitudes que se ejecutan en paralelo, pero estas solicitudes no parecen evitar que se cargue el nuevo video del elemento <video> .

Aquí puede ver las múltiples descargas de video simultáneas.

Creo que esto es realmente un error en el navegador, pero mientras tanto, puede solucionarlo proporcionando su propia directiva video (consulte http://plnkr.co/edit/QLMJd24rxvklr638e57Q?p=preview) :

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

Aquí, puede ver que la descarga de video ahora se detiene cuando navegamos fuera de la vista de video.

Por el momento, esta es la solución alternativa recomendada para este problema.

@petebacondarwin ... Al observar la especificación w3c, parece que un agente de usuario abortar en el documento hará que la carga de la transmisión también se cancele. Llamar a window.stop() canceló cualquier transmisión de red adicional para mí.

En última instancia, no es lo más ideal si desea otros recursos, pero proporciona cierto nivel de solución.

@daleyjem gracias por esta idea.
No podemos hacer esto en una directiva central, ya que evitaría la transmisión de otros videos.

Simplemente cree un filtro:
app.filter ("trustUrl", ['$ sce', función ($ sce) {
función de retorno (ordingUrl) {
return $ sce.trustAsResourceUrl (ordingUrl);
};
}]);

En Ver archivo:
<audio src = "{{Your_URL | trustUrl}}" controles del reproductor de audio> audio>

NOTA: tenga en cuenta el espacio en la etiqueta de audio

Hola, soy el creador de Videogular.

Como explicó @petebacondarwin , esto no es un problema con AngularJS, sino principalmente un problema de cómo funciona el video en HTML5 y cómo los navegadores manejan las solicitudes de video. Y se vuelve aún más extraño cuando necesitas que funcione en dispositivos móviles.

Luché mucho con el video y HTML5 con Videogular y debo decir que es difícil lograr que funcione sin problemas en todos los navegadores, pero no imposible.

Entonces, si alguien en el equipo de AngularJS quiere ayuda en esto, me complacerá compartir mi humilde conocimiento sobre esto y contribuir a solucionarlo. Esto es algo que realmente me molesta y en Angular 2 no tengo problemas con esto, por lo que sería genial tener un enfoque similar en ambos marcos.

+1

Si tiene una directiva en su reproductor de video, puede ver la variable src url y actualizarla manualmente:

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

Después de un montón de prueba y error, finalmente tengo la reproducción de video de manera confiable en Android 4.2.2, 4.3, 4.4.4, 5.0.0 y 5.1.0. Instale Crosswalk y use Videogular

Corregido con una directiva personalizada

<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);
        }
    }
});

İ analizar el video de la URL en db con json, pero no funciona (((por favor ayude

cuando hago clic en mi botón de reproducción, el video se muestra al revés y al presionar la pantalla completa, llega a su posición cualquier sugerencia sobre este problema

+1 no se puede analizar la URL, ya sea con src o ngSrc.
¿Se ha abandonado este error?

Estoy teniendo este mismo problema, ¿ha habido una solución todavía?

Esta solución funciona muy bien.

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