Vídeo em HTML5 não está funcionando com a tag AngularJS ng-src

AngularJS ng-src não funciona com o elemento HTML5 Video neste violino: http://jsfiddle.net/FsHah/5/

Olhando para o elemento video, a tag src está sendo preenchida com o src uri correto, mas o vídeo não é reproduzido.

Isso não é suportado no AngularJS , qual é a solução alternativa para isso?

Basta criar um filtro:

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

No arquivo de exibição:

  

Atualmente, isso parece um bug no AngularJS: https://github.com/angular/angular.js/issues/1352

Substituir a fonte por

Para reproduzir o vídeo eu usei apenas o seguinte método tem um botão chamado play e no ng clique do botão você tem que escrever isso

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

para reproduzir vídeo em ng-repeat use index . espero que ajude.

Minha resposta está atrasada alguns anos, mas isso é para qualquer um que ainda esteja procurando uma solução. Eu tive o mesmo problema. Lembrei que o Youtube exibe seus vídeos incorporados usando uma tag diferente – iframe. Eu apliquei as propriedades que eu queria e funcionou.

Para qualquer pessoa nova no AngularJS, o {{video}} é uma variável $ scope.video no controle dessa página que tem o caminho para o vídeo.

Remova a tag de origem da tag de vídeo e tente isso ..

  

e no seu aplicativo angular crie um filtro como este

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

Eu tentei com ajax call e não parecia funcionar em tudo. enquanto eu vejo que $ scope.src tem valor correto após a chamada ajax, ng-src não recebe a atualização.

Eu tentei $ timeout com $ apply e ainda não fiz nada. Alguém descobriu esse problema?

solução alternativa

no controlador

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

html:

  

Esta é uma precaução de segurança padrão no AngularJS. Por favor, veja os detalhes: https://docs.angularjs.org/api/ng/service/ $ sce

Para desabilitar o ‘Strictual Contextual Escaping’, você pode definir isso no seu arquivo app.js

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

No entanto eles não recomendam. Mas você pode usar para um controlador específico como este:

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

Você pode usar o módulo 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 usar js vanilla (javascript regular) para fazer este trabalho. Se você estiver ouvindo events como onended, convém reconsiderar o uso do $ scope. $ Apply ().

Meu exemplo:

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

Acho que o que está acontecendo é que o Angular preenche os atributos src depois que os elementos e foram adicionados à página, para que o navegador veja os elementos com URLs quebrados. Eu trabalhei em torno dele usando ng-if :

   

Isso faz com que o elemento esteja ligado à existência de foo , que é uma variável de escopo sendo preenchida por meio de uma chamada AJAX.