Angular.js: ngSrc ne fonctionne pas correctement avec la balise HTML5 Video Source

J'ai également un problème, mais je pense que le problème réside dans Angulars ng-repeat.
Si je supprime la vidéo de cette portée, elle joue bien, sinon aucune des commandes ne se chargera même.

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

Moi aussi.

Moi aussi! aide-moi

+1

J'utilise ng-repeat pour définir les sources ng-src et elles se chargent correctement lors du chargement de la page, mais si la vidéo est masquée via ng-show puis affichée à nouveau, les sources ne se rechargent pas (dans Chrome).

Je peux confirmer l'observation de sourcec0de - si je supprime le ng-repeat et que j'utilise une seule source ng-src (ou plusieurs sources ng-src), la vidéo se recharge correctement lors de la ré-affichage.

J'ai le même problème. Quelqu'un examine-t-il actuellement cela?

Avec ou sans ng-src , avec ou sans ng-repeat , chrome ne parvient pas à recharger une vidéo HTML5 à plusieurs reprises après avoir quitté la page puis revenir à la page.

À partir d'un cache propre, je vois 2 requêtes (la première Pending ), la seconde avec 206 Partial Content . Si j'actualise, je vois une requête avec 304 Not Modified . Lorsque je quitte la vue vidéo puis que je reviens (via un lien ou en utilisant le bouton retour), je reçois deux demandes pour la vidéo avec juste un statut Pending . L'un d'eux aura un type mime video/mp4 (correct), l'autre dit simplement Pending .

Est-ce que quelqu'un regarde même ce problème ???

Pouvez-vous fournir un exemple courant de ce problème?
Cela fonctionne-t-il sur certains navigateurs?
Avez-vous vérifié si les navigateurs prennent en charge la modification de l'attribut src sur les éléments vidéo HTML5 après le rendu?

Désolé, l'exemple d'application n'est pas encore publié.
Fonctionne bien dans Safari.
Comme indiqué ci-dessus, j'ai utilisé à la fois la directive ng-src et un attribut src codé en dur avec les mêmes résultats.

Que se passe-t-il si vous changez le src avec jQuery direct?
Je me demande si c'est réellement un bogue dans le navigateur plutôt qu'AngularJS?

Le 16 juillet 2013 à 22h31, Paul Grenier [email protected] a écrit:

Désolé, l'exemple d'application n'est pas encore publié.
Fonctionne bien dans Safari.
Comme indiqué ci-dessus, j'ai utilisé à la fois la directive ng-src et un src codé en dur
attribut avec les mêmes résultats.

-
Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps: //github.com/angular/angular.js/issues/1352#issuecomment -21075654
.

Même si je ne change pas le src (par exemple, codez en dur l'attribut video src), le problème se produit. Je n'ai aucun moyen de simuler le problème en dehors d'Angular car Angular contrôle le contenu. Je suis d'accord, cela peut être simplement un problème dans Chrome, mais je ne sais pas comment le tester.

Que voulez-vous dire par Angular contrôle le contenu?

Le problème se produit lorsque, à l'aide du contrôleur Angular, le contenu change, lors du chargement d'une autre vue. L'utilisation du bouton de retour ou d'un lien vers l'itinéraire précédent affiche l'ancien contenu, mais la vidéo ne se charge pas - à chaque fois. S'il s'agit d'un problème angulaire, ce n'est probablement que dans Chrome. Je suppose que la mise en cache agressive de Chrome et la méthode Angular pour changer les vues ne peuvent pas s'entendre sur ce qui doit être chargé.

@AutoSponge mon cas de test était:
page 1 avec un bouton pour aller à la page 2
page 2 avec un lecteur videojs et un bouton pour revenir à la page 1

allez à la page 1, puis à la page 2, la vidéo est chargée correctement.
cliquez sur le bouton pour revenir à la page 1, puis allez à la page 2, google chrome arrête d'utiliser videojs. cela se produit parce que l'objet videojs n'a pas été supprimé lorsque angular a supprimé l'élément du DOM, comme prévu. ce n'est pas un angularjs (yay!)

Retirez-le avant d'initialiser le lecteur videojs. Je fais cela parce que j'ai une directive qui ajoute un joueur. Par exemple, s'il est utilisé dans une directive:

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

Tout comme l'OP, je n'utilise pas d'objet wrapper. La vidéo est chargée via une balise vidéo HTML5. Proposez-vous que cela devrait être supprimé séparément?

eh bien, videoJS garde une trace des joueurs ajoutés au DOM mais il semble qu'il ne regarde pas les changements. Si vous supprimez l'élément du DOM (par exemple parce que vous naviguez vers une autre route), videoJS ne le saura pas et ne l'initialisera pas à nouveau. voir ligne 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
si vous le supprimez en dehors de videoJS, je suppose que vous devriez appeler la méthode dispose () du lecteur. Je suppose que cela fonctionne comme lorsque vous enveloppez un plugin jquery (?). C'est ce qui me fait penser que ce n'est pas un problème angulaire.

avoir ces problèmes aussi.
le chargement de fichiers AV vers src ou ng-src ne fait pas le travail. besoin d'écrire des directives ou des usines pour que cela fonctionne.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

J'ai aussi ce problème.

La vidéo ne se charge pas dans Chrome, Firefox et Safari. Cela fonctionne, cependant, dans IE.

Voici une solution : http : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Cela crée un scintillement désordonné lors du chargement de la page, mais cela fonctionne.

+1

une solution de contournement est la suivante:

dans votre contrôleur, une fonction dans mon cas est comme ceci:

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

puis dans mon cas, dans mon modèle, j'avais ce qui suit:

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

mon modèle dans views / audio.html ressemble à ceci:

<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 ne change pas alors aucun rechargement ne se produira, donc j'utilise le nom du fichier, cela pourrait simplement être un nombre aléatoire à la place

@caitp Je pensais que tu avais un PR pour ça, ma mémoire me manque-t-elle?

@IgorMinar J'allais y travailler, mais j'ai réalisé que je ne pouvais pas reproduire le problème (voir http://jsfiddle.net/J77gE/). J'ai pensé que ce serait amusant de créer un module d'assistance multimédia au lieu du noyau avec plus d'options de liaison.

Mais pour autant que je sache, ng-src fonctionne bien pour les balises source dans les navigateurs modernes et angular modernes

Le problème que j'ai mentionné était spécifiquement dû au changement de vue et à l'utilisation du bouton de retour. Je ne sais pas comment jsfiddle tente de recréer le problème.

Ce n'est pas le cas, le fait est que nous n'avons pas de problème d'interpolation des balises source, je pense que ce n'est pas le problème. Je n'ai pas pu reproduire du tout votre problème particulier

@AutoSponge pouvez-vous fournir une application de démonstration et des instructions sur la façon de reproduire cela s'il vous plaît?

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

Cliquez sur le lien Vidéo. Il se chargera la première fois. Cliquez sur Accueil, puis à nouveau sur Vidéo. En 1 ou 2 clics, il cessera probablement de se charger dans Chrome.

(et ne jugez pas, j'ai jeté ceci ensemble basé sur une application d'il y a 8 mois!)

@AutoSponge ce n'est pas un problème angulaire. C'est un comportement étrange de Chrome, mais il interpole toujours votre fichier source et obtient le bon src. Cela semble être un problème de mise en cache, ce qui est un peu malheureux. (vous avez également ce problème avec ngIf, mais cela peut être contourné en utilisant ngShow + en réglant le volume sur 0)

Je conviens que c'est un problème malheureux avec Chrome. Je pense que c'est la raison principale pour laquelle ce problème est resté ouvert pendant 9 mois avec peu de travail. Étant donné que Chrome ne résoudra probablement pas le problème, pensez-vous qu'il soit déraisonnable de créer une option de contournement du cache? Je pense que cela ajouterait simplement une chaîne aléatoire au src.

J'ai également pensé que cela pourrait avoir quelque chose à voir avec pushState - soit la mise en œuvre dans Chrome, soit son utilisation dans Angular. Mais je pensais honnêtement que cela aurait été résolu maintenant.

Je pense que ce problème particulier appartient probablement au suivi des problèmes de chrome (je pense qu'il y a quelques problèmes liés au cache HTMLMediaElement déjà ouverts, il vaudrait donc la peine d'en parler ici).

Je ne me souviens pas, mais il est possible que ce soit le comportement attendu défini dans la spécification (et ce ne serait pas la première fois que la spécification demandait des comportements étranges / malheureux)

Cela peut être distinct du problème que j'ai rencontré, mais j'ai eu un problème où

J'espère que c'était quelque peu intelligible et lié!

Je viens de découvrir une solution de contournement. Cela fonctionne pour Chrome, mais pas pour d'autres navigateurs (dans certains cas, à maintes reprises, etc.) :)
Dernier commentaire dans
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

Comme autre note, la spécification HTML5 note que la modification dynamique de l'attribut src d'unbalise n'aura aucun effet, mais faire de même sur l'attribut src d'un

Après un peu de recherche sur Google, j'ai trouvé que cela était probablement lié au chrome attendant que les sockets disponibles ne soient pas angulaires, et que l'ajout de preload = "none" à la balise vidéo semblait résoudre le problème.

solution de contournement

dans le contrôleur

$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 votre solution de contournement suggérée utilise de mauvaises pratiques. Vous ne devriez jamais écrire dans le DOM à partir d'un contrôleur comme celui-là. Pensez à utiliser une directive personnalisée.

@btford 1 d'accord mais ..
Il a consacré le dernier aux méchants, les fins des remèdes

+1

Je pense que chaque fois qu'une nouvelle source a été définie, vous devez appeler à nouveau .load() sur l'élément vidéo natif pour que la nouvelle source vidéo apparaisse.

Salut, j'ai un problème avec angularJS sur Google Chrome lorsque je charge la page pour la première fois, le chargement de la vidéo HTML 5, mais lorsque je change la vue avec ng-view, il ne se charge pas, mais dans Firefox un explorateur Internet, cela fonctionne très bien.

Je ne sais pas ce que j'ai à faire à ce sujet!

Cela ressemble à un problème similaire à <embed> et ngSrc . Voir # 339

Cela doit être corrigé ddddddd :(

J'ai écrit un plnkr
cliquez sur la vidéo, la vidéo se charge. Cliquez sur un autre lien puis revenez à la vidéo. La vidéo est en attente. Vous pouvez voir les requêtes dans chrome network . Deux demandes, l'une est la précédente, toujours en cours. Un autre est nouveau, en attente.

@kaiqigong Je l'ai fait fonctionner la semaine dernière en définissant l'URL comme étant de confiance pour la vidéo, car la vidéo n'était pas locale sur le site Web.

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

J'ai forké votre plnkr et l'ai modifié pour définir l'URL et lui faire confiance:

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

Il y a un retard sur la vidéo mais ça marche pour moi.

@ phillip-haydon merci pour votre réponse.
J'ai essayé votre plnkr, mais il ne fonctionne toujours pas correctement. (Essayez de basculer rapidement entre les liens.)
Ce que j'ai trouvé, c'est que lorsque nous supprimons la balise vidéo (en changeant de route ou en effectuant d'autres opérations DOM), le navigateur extrait toujours la source vidéo. Lorsque nous revenons à la vidéo. Une autre requête vidéo est effectuée, ce qui rend le trafic réseau brouillé.
Si je règle le src de la vidéo sur '' avant de supprimer la balise vidéo, le navigateur arrêtera de tirer, ce qui résoudra le problème. Veuillez essayer ce codepen: http://codepen.io/cagegong/pen/bJHAz

Donc ma solution finale:

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

Oui, le mien fonctionne, mais pas à 100%, pourquoi le navigateur ne tue pas la demande lui-même lorsque l'élément dom qui le demande est détruit, je n'en ai aucune idée. Je ne pense pas que ce soit quelque chose que Angular lui-même devrait être tenu de gérer.

Il est intéressant de voir que le définir sur une chaîne vide tue la demande, mais je devrai peut-être configurer quelque chose pour l'ajouter dans mon projet. Merci.

@jharaujoads
J'espère que cela résout votre problème

: +1:

Wow, deux ans et rien. L'angle est-il vraiment maintenu?

Angular ne vaut pas le temps et les efforts. Ils ont déjà dit "va te faire foutre" à la communauté avec Angular 2.0.

@IDontEatSoap Je ne sais pas pourquoi je vous pose cette question, vérifiez simplement la liste des commits et des versions . Étant donné une nouvelle version chaque semaine et peu de commits _un jour_, y compris les week-ends, cela me semble à peu près maintenu ...

@ phillip-haydon s'il vous plaît garder le professionnel de la conversation et concentré sur les questions techniques, vous violez notre code de conduite .

@IDontEatSoap @ phillip-haydon si vous êtes vraiment intéressé par la résolution de ce problème, la meilleure façon d'aller de l'avant est d'envoyer une pull request avec des modifications de code qui feront fonctionner le futur dans tous les navigateurs.

Et pourtant, une simple balise vidéo src n'est pas prise en charge?

J'ai réussi à le faire fonctionner en exposant $ sde et en utilisant src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"

Ne vous méprenez pas, j'aime vraiment anguleux. Mais de petites choses comme les balises vidéo src et SVG qui ne sont pas prises en charge et qui nécessitent des solutions de contournement sont inattendues.

Continuez votre bon travail :): +1:

+1, impossible d'ajouter une webcam en direct avec des données dynamiques.

@ pkozlowski-opensource Je ne suis plus intéressé car je n'aime pas Angular maintenant que vous avez abandonné la communauté pour V2. Il n'y a aucun point à gaspiller des efforts dessus.

@ phillip-haydon Merci pour cette information. Je cherchais juste dans Frontend Frameworks à utiliser avec node.js. Je n'avais jamais entendu parler du problème V2 auparavant. Mon équipe et moi avons décidé d'aller avec React.js en raison de la façon dont ils rompent la compatibilité entre V1 et V2. Vous pensez que l'énorme fossé que ce type de réflexion a causé dans la communauté Python aurait appris à tout le monde une leçon.

:déçu:

@ phillip-haydon et @StevenDStanton - Je suis désolé d'apprendre que vous avez choisi un autre framework, mais bien sûr, vous devez choisir les outils qui fonctionnent le mieux pour votre propre développement.

Juste pour être clair cependant, AngularJS n'a pas abandonné la communauté, en fait la communauté a été impliquée encore plus que jamais dans le développement en cours d'Angular 1.x. Nous sommes sur le point de publier AngularJS 1.4.0, qui sera le temps le plus court entre les grands changements de version à ce jour et a eu plus de membres de la communauté travaillant dans l'équipe de base que jamais auparavant. Une fois cette version publiée, nous commencerons le développement vers AngularJS 1.5, qui devrait (toutes choses étant égales par ailleurs) sortir bien avant la fin de 2015. Rappelez-vous également que Google, lui-même a littéralement des centaines d'applications en production utilisant AngularJS 1.x en fonctionnement à l'heure actuelle. Il est dans l'intérêt de Google de s'assurer que ces applications, tout comme vos applications, continuent d'avoir une vie ou un chemin de migration.

Concernant Angular 2 - cet effort de développement est précisément motivé par les commentaires de la communauté. L'objectif est de fournir un cadre plus rapide, plus petit et plus robuste, capable de prendre en charge des applications plus grandes et plus complexes; pour mieux performer sur les appareils mobiles; et de continuer à suivre l'évolution des navigateurs Web avec une prise en charge transparente des composants Web.

Pour y parvenir, il n'était pas possible de continuer à boulonner les choses sur AngularJS 1.x, car nous devions repenser certains des blocs de construction fondamentaux, tels que le fonctionnement de l'injecteur et du compilateur. Le résultat est un tout nouveau cadre qui continue de pousser les mêmes objectifs de haut niveau qui ont rendu AngularJS aussi populaire et fiable qu'il est devenu, mais aussi être en mesure de fournir un chemin de preuve pour les années à venir.

Il se peut qu'il n'y ait pas de solution de mise à niveau clé en main pour migrer d'AngularJS 1.x vers Angular 2, c'est vrai. Mais il sera certainement plus facile de migrer d'AngularJS 1.x vers Angular 2 que de migrer d'AngularJS 1.x vers un framework complètement différent.

Il me semble que le navigateur n'est pas très doué pour surveiller l'élément <source> pour les modifications apportées à son attribut src . Le problème de l'affiche originale peut être contourné en utilisant ng-if .

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

J'utilise juste

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

@ tot-ra - Je pense que votre version fonctionne parce que le navigateur surveille le changement de l'attribut src sur l'élément <video> comme on peut le voir ici: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

À partir de la spécification HTML5: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

La modification dynamique d'un élément source et de son attribut lorsque l'élément est déjà inséré dans un élément vidéo ou audio n'aura aucun effet. Pour changer ce qui est en cours de lecture, utilisez simplement l'attribut src directement sur l'élément média, en utilisant éventuellement la méthode canPlayType () pour choisir parmi les ressources disponibles. En général, la manipulation manuelle des éléments source après l'analyse du document est une approche inutilement compliquée.

Cela signifie que vous ne pouvez pas vous attendre à ce que le navigateur gère AngularJS (ou quoi que ce soit d'autre d'ailleurs) en modifiant dynamiquement les éléments source. Au lieu de cela, nous avons besoin de quelques directives spécifiques au support qui traiteront de la mise à jour de la propriété <video> balise src cas échéant. Peut-être quelque chose du genre de la bibliothèque @caitp .

En ce qui concerne le problème avec la demande d'une vidéo ne pas être annulée, je suggère que nous pourrions mettre en œuvre quelque chose comme @kaiqigong l'idée « dans https://github.com/angular/angular.js/issues/1352#issuecomment -58.865.425. Peut-être pourrions-nous ajouter une directive d'élément video qui définit son src sur "" quand son élément est détruit?

Autres bibliothèques potentielles qui pourraient être essayées:

• ngVideo
• vidéogulaire

Se désabonner. Quitter AngularJS pour React. Désolé les gars mais merci pour votre travail acharné.

Ouais bonne idée, je me désinscris aussi. J'ai abandonné AngularJS pour http://aurelia.io/

Revenons donc au problème technique en question:

Il y a en fait deux problèmes discutés dans ce numéro:

• Le <video> élément ne contrôle pas , ni réagir aux changements au src attribut sur <source> tags. Cela fait partie de la spécification HTML5 et il est donc peu probable que cela change dans un proche avenir. Cela signifie que nous ne pouvons pas utiliser la manière idiomatique AngularJS de spécifier dynamiquement des éléments <source> , avec ou sans ngSrc . En d'autres termes, nous ne pouvons tout simplement pas utiliser l'interpolation dans l'attribut <source> balise src car l'élément <video> ne prendra pas en compte le changement.
• Dans certains cas (navigateurs), l'élément <video> n'annule pas sa demande de téléchargement d'une vidéo correctement, alors l'élément est supprimé du DOM. L'effet de ceci est que si votre application change le DOM assez rapidement, en ajoutant et en supprimant des balises <video> , afin que la vidéo n'ait pas eu le temps de se télécharger, vous pouvez vous retrouver coincé dans une situation où un nouveau <video> élément <video> précédemment détruit. Il semble que le navigateur annulera en fait la demande de vidéo si l'attribut src (ou currentSrc ?) Est défini sur la chaîne vide ( "" ) avant que l'élément ne soit détruit .

Aucun de ces problèmes n'est un bogue dans AngularJS en soi. Mais cela ne veut pas dire que nous ne pouvons rien y faire.

Concernant le premier problème:
La seule façon de résoudre ce problème, dans Angular ou dans tout autre framework, est d'écrire du JavaScript pour gérer les sources qui changent dynamiquement, comme décrit dans la spécification HTML5. Je n'ai vu de solution à cela dans aucun des autres principaux frameworks, mais dans AngularJS, le moyen le plus attrayant est de créer un ensemble de directives. C'est effectivement ce que les personnes impliquées dans les projets suivants ont essayé de faire:

• ngMedia
• ngVideo
• vidéogulaire

En fonction de l'intérêt de la communauté, nous pourrions envisager de développer quelque chose de similaire pour Angular 1.5 et le conditionner comme son propre module (similaire à la façon dont ngCookies est emballé). Revoyons cela lors de la planification 1.5. En attendant, la meilleure solution est d'implémenter l'une des bibliothèques ci-dessus et de les aider à faire fonctionner leur bibliothèque pour vous.

Concernant le deuxième problème:
Je ne semble pas être en mesure de reproduire cela personnellement pour le moment. Dans mon Chrome, il continue en effet de diffuser la vidéo précédente des éléments <video> même après que nous ayons détruit l'élément, ce qui, après quelques allers-retours, entraîne de nombreuses requêtes exécutées en parallèle, mais ces requêtes ne semblent pas empêcher le chargement de la vidéo du nouvel élément <video> .

Ici, vous pouvez voir les multiples téléchargements vidéo simultanés.

Je pense que c'est vraiment un bogue dans le navigateur, mais en attendant, vous pouvez contourner ce problème en fournissant votre propre directive video (voir http://plnkr.co/edit/QLMJd24rxvklr638e57Q?p=preview) :

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

Ici, vous pouvez voir que le téléchargement de la vidéo s'arrête maintenant lorsque nous quittons la vue vidéo.

Pour le moment, c'est la solution de contournement recommandée pour ce problème.

@petebacondarwin ... En regardant la spécification w3c, il semble qu'un agent utilisateur abandonné sur le document provoquera également l'abandon du chargement du flux. L'appel d'un window.stop() annulé tout autre streaming réseau pour moi.

En fin de compte, ce n'est pas la chose la plus idéale si vous voulez d'autres ressources, mais cela fournit un certain niveau de solution de contournement.

@daleyjem merci pour cette idée.
Nous ne pouvons pas faire cela dans une directive de base car cela empêcherait la diffusion d'autres vidéos.

Créez simplement un filtre:
app.filter ("trustUrl", ['$ sce', fonction ($ sce) {
fonction de retour (RecordingUrl) {
return $ sce.trustAsResourceUrl (RecordingUrl);
};
}]);

Dans le fichier de vue:
<audio src = "{{Your_URL | trustUrl}}" commandes du lecteur audio> audio>

REMARQUE: faites attention à l'espace dans la balise audio

Salut, je suis le créateur de Videogular.

Comme @petebacondarwin l'a expliqué, ce n'est pas un problème avec AngularJS mais surtout un problème de fonctionnement de la vidéo sur HTML5 et de la manière dont les navigateurs traitent les demandes vidéo. Et cela devient encore plus étrange lorsque vous devez le faire fonctionner sur des appareils mobiles.

Je me suis beaucoup battu avec la vidéo et le HTML5 avec Videogular et je dois dire que c'est difficile de le faire fonctionner de manière transparente sur tous les navigateurs, mais pas impossible.

Donc, si quelqu'un de l'équipe AngularJS veut de l'aide à ce sujet, je serais heureux de partager mes humbles connaissances à ce sujet et de contribuer à y remédier. C'est quelque chose qui me dérange vraiment et dans Angular 2 je n'ai pas de problèmes avec cela, donc ce serait génial d'avoir une approche similaire dans les deux frameworks.

+1

Si vous avez une directive sur votre lecteur vidéo, vous pouvez regarder la variable url src et la mettre à jour manuellement:

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

Après une tonne d'essais et d'erreurs, la vidéo est enfin lue de manière fiable sur Android 4.2.2, 4.3, 4.4.4, 5.0.0 et 5.1.0. Installez Crosswalk et utilisez Videogular

Fixé avec une directive personnalisée

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

© analyser la vidéo d'url dans la base de données avec json, mais ne fonctionne pas (((veuillez aider

lorsque je clique sur mon bouton de lecture, la vidéo s'affiche à l'envers et lorsque vous appuyez sur plein écran, elle parvient à sa position toute suggestion à ce problème

+1 il n'y a pas d'analyse de l'url que ce soit avec src ou ngSrc.
Cette erreur a-t-elle été abandonnée?

J'ai ce même problème y a-t-il déjà eu une solution

Cette solution fonctionne très bien.

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