HTML5 Video non funziona con AngularJS ng-src tag

Question

AngularJS ng-src non funziona con elemento HTML5 video in questo violino: http://jsfiddle.net/FsHah/5/

Guardando elemento video, il tag src viene popolato con la corretta uri src, ma il video non suona.

È questo not supported in AngularJS, qual è la soluzione alternativa?

Answer 1

Basta creare un filtro:

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

In Visualizza File:

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

Answer 2

questo momento sembra un bug in AngularJS: https://github.com/angular/angular.js/issues/1352

Sostituzione sorgente con <video ng-src="{{src}} controls></video> sembra essere l'unico modo al momento di caricare almeno una fonte nel video. Spero che qualcuno arrivi a risolvere questo problema o fornisca una soluzione alternativa.

Answer 3

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 ha fatto nulla. Qualcuno capisce questo problema?

Answer 4

Per riprodurre il video che ho appena usato il seguente metodo avere un gioco pulsante di chiamata e nel ng-click del pulsante si deve scrivere questo

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

per riprodurre video in uso ng-repeat indice. spero che aiuti.

Answer 5

soluzione

controller

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

Answer 6

La mia risposta è un paio di anni di ritardo, ma questo è per chi è 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.

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

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

Answer 7

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

Per disattivare il 'Strict Escaping contestuale' compeletly è possibile definire questo nei vostri file di app.js

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

Tuttavia non è consigliabile. Ma si può utilizzare per un controller spesific 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); }); 

Answer 8

Basta usare js vaniglia (javascript regolare) per fare questo lavoro. 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]; 

Answer 9

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

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

Answer 10

Penso che quello che sta succedendo è riempimenti angolare nel src attributi dopo la e gli elementi sono stati aggiunti alla pagina, in modo da il browser vede gli elementi con URL danneggiati. Ho lavorato intorno usando 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> 

Questo rende l'elemento legato all'esistenza di foo, che è un essere variabile portata popolato tramite AJAX chiamata. tag di origine

Answer 11

Togliere dal tag video e provare questo ..

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

e nella vostra applicazione angolare creare un filtro come questo

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