Vidéo HTML5 n'est pas de travailler avec AngularJS ng-src de la balise

AngularJS ng-src ne fonctionne pas avec les Vidéos HTML5 élément dans ce violon: http://jsfiddle.net/FsHah/5/

En regardant la vidéo de l'élément, la src de la balise est remplie avec le bon src uri, mais la vidéo n'est pas jouer.

Est-ce pas pris en charge dans AngularJS, quelle est la solution pour cela?

InformationsquelleAutor qais | 2013-03-31
  1. 50

    Il suffit de Créer un Filtre:

    app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

    En Vue De Fichier:

    <audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>
    • super réponse! bon de noter que le code d'une vidéo est en fait <video controls="controls" name="Video Name" src="{{videoUrl | trustUrl}}"></video>
    • Donner ce gars une médaille! Vous juste m'a sauvé ma santé mentale monsieur!! Et oui accessoires d'origine de confiance filtre. Grande solution élégante.
    • Pouvez-vous développer s'il vous plaît? Dans cet exemple,/home ne vous définissez la source réelle? Votre exemple montre l'utilisation d'un objet audio, mais la question a été poser à propos d'un objet vidéo. Est-ce la même méthode pour les deux? Aussi, qu'est ce qu'un filtre? Merci.
    • sdei, toute chance que vous pouvez expliquer ce qui se passe ici?
    • fonctionne comme un charme, mais s'il vous plaît pourriez-vous fournir une explication?
    InformationsquelleAutor Sdd Sdei
  2. 7

    Pour lire la vidéo j'ai juste utilisé la méthode suivante
    avoir un bouton play et la ng-cliquez sur le bouton, vous devez écrire ce 

     var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();

    de lire de la vidéo en ng-repeat utilisation indice.
    espérons que cela aide.

    • Merci à vous, cela a fonctionné pour moi! Dans ma situation, je voulais la vidéo pour jouer automatiquement, donc je l'ai fait de cette façon en utilisant un JS délai d'attente.
    InformationsquelleAutor kavinhuh
  3. 7

    Actuellement, cela semble être un bug dans AngularJS: https://github.com/angular/angular.js/issues/1352

    Remplacement de source avec <video ng-src="{{src}}" controls></video> semble être le seul moyen pour le moment, à moins de charge d'une source dans la vidéo. J'espère que quelqu'un vient à corriger ce ou de fournir une solution de contournement d'une certaine sorte.

    • il a fallu toute ma journée, mais cette solution fait le truc.. merci beaucoup
    InformationsquelleAutor dk123
  4. 5

    Retirer de la source de balise à partir de la balise vidéo et essayez ce..

    <video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video>

    et dans votre angulaire de l'application créer un filtre comme ceci

     app.filter("trustUrl", function($sce) {
            return function(Url) {
                console.log(Url);
                return $sce.trustAsResourceUrl(Url);
            };
        });
    • remarque: affiche sera une erreur "not Found", devrait être ng-attr-affiches
    InformationsquelleAutor saurabh yadav
  5. 4

    Ma réponse est un quelques années de retard, mais c'est pour quelqu'un qui est toujours à la recherche d'une solution. J'ai eu le même problème. Je me suis souvenu que Youtube affiche leurs vidéos intégrées en utilisant un autre tag iframe.
    J'ai appliqué les propriétés que je voulais et cela a fonctionné.

    <iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>

    Pour tous ceux qui AngularJS, le {{ vidéo }} $sont à la portée.vidéo de la variable dans le contrôle de cette page qui contient le chemin d'accès à la vidéo.

    InformationsquelleAutor Soubriquet
  6. 2

    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>
    • angulaire équivalent, sans jQuery dépendance: angular.element(document.getElementById('audio_element_id')).attr('src', $scope.mp3)
    InformationsquelleAutor Dario Agliottone
  7. 2

    C'est un défaut de précaution de sécurité en AngularJS. Veuillez voir les détails: https://docs.angularjs.org/api/ng/service/$sce

    Pour désactiver la "Stricte Contextuelle s'échappe" compeletly vous pouvez définir dans votre app.js fichier

    angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
      //Completely disable SCE.  For demonstration purposes only!
      //Do not use in new projects.
      $sceProvider.enabled(false);
    });

    Cependant ils ne recommandent pas. Mais vous pouvez utiliser pour un spesific contrôleur comme ceci:

    var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home',    function ($scope, Home) {
$scope.Home = Home.query(); }]).config(function($sceProvider) {
$sceProvider.enabled(false); });
    InformationsquelleAutor nesimtunc
  8. 1

    Vous pouvez utiliser ng-médias module.

    JS:

    angular.module('app', ['media'])
    .controller('mainCtrl', function($scope) {
        
        $scope.videoSources = [];
        
        $scope.loadVideos = function() {
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.mp4');
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.webm');
        };
    });

    HTML:

    <div ng-app='app'>
  <div ng-controller='mainCtrl'>        
    <video html5-video='{{ videoSources }}'
        autoplay='true' controls='true'>
    </video>
    <br>
    <a href="#" ng-click='loadVideos()'>Load videos</a>
  </div>
</div>

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://caitp.github.io/ng-media/ng-media.js"></script>

    Plunker.

    InformationsquelleAutor Muhammad Reda
  9. 1

    Je pense que ce qui se passe est Angulaire remplit le src attributs après les et des éléments ont été ajoutés à la page, de sorte que le navigateur voit les éléments avec de l'Url cassé. J'ai travaillé autour d'elle à l'aide de ng-if:

            <video muted ng-if="foo" loop autoplay>
            <source ng-src="{{foo.media.mp4.url}}">
            <source ng-src="{{foo.media.webm.url}}" type="video/webm">
            <img ng-src="{{foo.media.gif.url}}">
        </video>

    Ce fait l'élément lié à l'existence de foo, qui est une étendue variable peuplées par appel AJAX.

    InformationsquelleAutor Seán Hayes
  10. 0

    Suffit d'utiliser la vanille js (régulier javascript) pour faire ce travail.
    Si vous êtes à l'écoute d'événements comme onended vous pourriez vouloir reconsidérer l'utilisation de $scope.$appliquer().

    Mon exemple:

    document.getElementById('video').src = $scope.videos[$scope.videoindex];
    InformationsquelleAutor Marc