Il video HTML5 non funziona con il tag ng-src di AngularJS

AngularJS ng-src non funziona con l’elemento HTML5 Video in questo fiddle: http://jsfiddle.net/FsHah/5/

Guardando l’elemento video, il tag src viene popolato con il corretto src uri, ma il video non viene riprodotto.

Non è supportato in AngularJS , qual è la soluzione per questo?

Basta creare un filtro:

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

Nel file di visualizzazione:

  

Questo sembra attualmente un bug in AngularJS: https://github.com/angular/angular.js/issues/1352

Sostituire la sorgente con

Per riprodurre il video ho appena usato il seguente metodo con un pulsante chiamato play e nel ng-clic del pulsante devi scrivere questo

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

per riprodurre video in indice di utilizzo ng-repeat. spero che sia d’aiuto.

La mia risposta è di alcuni anni in ritardo, ma questo è per chiunque sia ancora alla ricerca di una soluzione. Ho avuto lo stesso problema. Mi sono ricordato che Youtube mostra i loro video incorporati usando un tag diverso – iframe. Ho applicato le proprietà che volevo e ha funzionato.

Per chiunque sia nuovo su AngularJS, il {{video}} è una variabile $ scope.video nel controllo per questa pagina che ha il percorso del video.

Rimuovi il tag sorgente dal tag video e prova questo ..

  

e nella tua app angular creare un filtro come questo

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

Ho provato con una chiamata Ajax e non sembra funzionare affatto. mentre vedo che $ scope.src ha il valore corretto dopo una chiamata ajax, ng-src non riceve l’aggiornamento.

Ho provato, $ timeout con $ apply e ancora non ho fatto nulla. Qualcuno capisce questo problema?

soluzione

nel controller

 $scope.mp3 = "http://download.jw.org/audio.mp3" $scope.$watch('mp3', function() { $("audio").attr("src",$scope.mp3) }); 

html:

  

Questa è una precauzione di sicurezza predefinita in AngularJS. Si prega di consultare i dettagli: https://docs.angularjs.org/api/ng/service/ $ sce

Per disabilitare il ‘Strict Contextual Escaping’ in maniera compelta puoi definirlo nel tuo file app.js

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

Comunque loro non lo raccomandano. Ma puoi usare per un controller spesifico come questo:

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

È ansible utilizzare il modulo ng-media .

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

Basta usare vanilla js (javascript normale) per farlo funzionare. Se stai ascoltando eventi come onended potresti voler riconsiderare l’uso di $ scope. $ Apply ().

Il mio esempio:

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

Penso che quello che sta succedendo sia il riempimento angular degli attributi src dopo che gli elementi e sono stati aggiunti alla pagina, quindi il browser vede gli elementi con URL danneggiati. Ci ho lavorato intorno usando ng-if :

   

Questo rende l’elemento legato all’esistenza di foo , che è una variabile di ambito popolata tramite chiamata AJAX.