web-dev-qa-db-fra.com

La vidéo HTML5 ne fonctionne pas avec le tag AngularJS ng-src

AngularJS ng-src ne fonctionne pas avec l'élément vidéo HTML5 dans ce violon: http://jsfiddle.net/FsHah/5/

En regardant l'élément video, la balise src est remplie avec l'URI src correct, mais la vidéo ne joue pas.

Est-ce non supporté dans AngularJS , quelle est la solution de contournement pour cela?

ajaxhtml5angularjshtml5-video
20
qais

Il suffit de créer un filtre:

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

Dans le fichier de vue:

<audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>
46
Sdd Sdei

Cela ressemble actuellement à un bug dans AngularJS: https://github.com/angular/angular.js/issues/1352

Remplacer la source par <video ng-src="{{src}}" controls></video> semble être le seul moyen pour le moment de charger au moins une source dans la vidéo. Espérons que quelqu'un vienne résoudre ce problème ou fournisse une solution de contournement.

7
dk123

Pour lire la vidéo, je viens d'utiliser la méthode suivante Avoir un bouton appelé jouer et dans le ng-clic du bouton, vous devez écrire ceci 

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

pour lire une vidéo en mode répétition, utilisez index . espérons que cela vous aidera.

7
kavinhuh

Supprimez la balise source de la balise video et essayez ceci.

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

et dans votre application angulaire créer un filtre comme celui-ci

 app.filter("trustUrl", function($sce) {
            return function(Url) {
                console.log(Url);
                return $sce.trustAsResourceUrl(Url);
            };
        });
5
saurabh yadav

Ma réponse a quelques années de retard, mais c'est pour ceux qui cherchent encore une solution. J'ai eu le même problème. Je me suis rappelé que Youtube affiche leurs vidéos intégrées en utilisant un tag différent - 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 les nouveaux venus dans AngularJS, le {{video}} est une variable $ scope.video dans le contrôle de cette page qui contient le chemin d'accès à la vidéo.

4
Soubriquet

Ceci est une mesure de sécurité par défaut dans AngularJS. Veuillez consulter les détails: https://docs.angularjs.org/api/ng/service/$sce

Pour désactiver la fonction 'Échappement contextuel strict', vous pouvez définir ceci dans votre fichier app.js.

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 contrôleur spécifique 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); });
2
nesimtunc

workaround

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>
2
Dario Agliottone

Vous pouvez utiliser ng-media module.

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

1
Muhammad Reda

Je pense que ce qui se passe est que Angular remplit les attributs src après que les éléments et aient été ajoutés à la page, de sorte que le navigateur voit les éléments avec des URL cassées. J'ai travaillé dessus en utilisant 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>

Cela rend l'élément lié à l'existence de foo, qui est une variable de portée renseignée via l'appel AJAX.

1
Seán Hayes

Utilisez simplement Vanilla js (javascript classique) pour que cela fonctionne . Si vous écoutez des événements comme ceux-ci, vous voudrez peut-être reconsidérer l’utilisation de $ scope. $ Apply ().

Mon exemple:

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