O vídeo do HTML5 não está a funcionar com a marca AngularJS ng-src
AngularJS ng-src não funciona com o elemento de Vídeo HTML5 neste violino: http://jsfiddle.net/FsHah/5/
olhando para o elemento de vídeo, a tag src está sendo preenchido com o URI src correto, mas o vídeo não toca.
Isto é não suportado em AngularJS , Qual é a solução para isto?
11 answers
Basta criar um filtro:
app.filter("trustUrl", ['$sce', function ($sce) {
return function (recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
No Ficheiro Ver:
<audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>
Substituir a fonte por {[[0]} parece ser a única maneira de, no momento, pelo menos, carregar uma fonte no vídeo. Esperemos que alguém apareça para resolver isto ou para dar uma solução de algum tipo.
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
Para reproduzir vídeo no ng-repetir a utilização índice . espero que ajude.
<iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>
Remova a marca de origem da marca de vídeo e tente isto..
<video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video>
E na sua aplicação angular crie um filtro como este
app.filter("trustUrl", function($sce) {
return function(Url) {
console.log(Url);
return $sce.trustAsResourceUrl(Url);
};
});
Solução de trabalho
No controlador
$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>
Para desactivar a' fuga Contextual estrita', pode definir isto na sua aplicação.ficheiro js
angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects.
$sceProvider.enabled(false);
});
var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home', function ($scope, Home) {
$scope.Home = Home.query(); }]).config(function($sceProvider) {
$sceProvider.enabled(false); });
Pode usar o Módulong-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 .
O meu exemplo:
document.getElementById('video').src = $scope.videos[$scope.videoindex];
Acho que o que está a acontecer é que o Angular preenche os atributos {[[1]} depois de os e elementos terem sido adicionados à página, para que o navegador Veja os elementos com URLs quebrados. Eu trabalhei em torno dele 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>
Isto faz com que o elemento ligado à existência de foo, que é uma variável de escopo sendo povoado através da chamada AJAX.