HTML5 Video bu keman HTML5 video elemanı ile çalışmıyor angularjs ng-src etiketi

Question

angularjs ng-src ile çalışmıyor: http://jsfiddle.net/FsHah/5/

video öğesinin baktığımızda, src etiketi, doğru src uri ile doldurulur ediliyor ama video oynamıyor.

AngularJS içinde not supported mı, bunun için geçici çözüm nedir?

Answer 1

Sadece Filtre Oluştur

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

Answer 2

Bu, şu anda angularjs içinde bir böcek gibi görünüyor: <video ng-src="{{src}} controls></video> ile https://github.com/angular/angular.js/issues/1352

değiştirilmesi kaynak en az video içine bir kaynak yüklemek için şu anda tek yol olarak görünmektedir. Umarım birisi bunu düzeltmek veya bir çeşit çözüm sağlamak için gelir.

Answer 3

ajax çağrısı ile denedim ve hiç işe yaramadı. ajax çağrısından sonra $ scope.src'nin doğru değere sahip olduğunu görürsem ng-src güncellemeyi alamaz.

$ Uyguladığım $ zaman aşımı denedim ve hala hiçbir şey yapmadım. Bu sorunu anlayan var mı?

Answer 4

videoyu oynatmak için sadece bir düğmeye denilen oyun var ve düğmeye ng tıklama size ng-repeat kullanım videoyu oynatmak için bu

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

yazmak zorunda aşağıdaki yöntemi kullanıldı dizin. umarım yardımcı olur. denetleyicisi

Answer 5

geçici çözüm

$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

My yanıtı geç birkaç yıl olduğunu, ancak bu hala bir çözüm arayan herkes içindir. Bende aynı sorun vardı. Youtube'un gömülü videolarını farklı bir etiket - iframe kullanarak görüntülediğini hatırladım. İstediğim özellikleri uyguladı ve işe yaradı.

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

angularjs yeni herkes için, {{Video}} videonun yolunu sahip bu sayfanın kontrolünde $ scope.video değişkendir.

Answer 7

Bu, AngularJS'de varsayılan bir güvenlik önlemidir. ayrıntıları bakın: https://docs.angularjs.org/api/ng/service/ $ sce

'Sıkı Bağlamsal kaçan' compeletly onlar önermiyoruz Ancak

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

dosyanızda app.js bu tanımlayabilirsiniz devre dışı bırakın. Ama böyle bir spesifik denetleyicisi için kullanabilir:

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

Sadece bu işi yapmak için vanilya js (düzenli javascript) kullanın. Eğer devam etmek gibi olayları dinliyorsanız, $ scope. $ Apply() kullanarak tekrar düşünmek isteyebilirsiniz.

Benim örnek:

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

Answer 9

Sen ng-media modülünü kullanabilirsiniz.

Plunker

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>

.

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

Görüntüle Dosya:

Answer 10

yüzden ve elementler sayfasına eklendikten sonra neler oluyor src özelliklerinde Açısal doldurur olduğunu düşünüyorum tarayıcı öğeleri kırık URL'lerle görür. Ben ng-if kullanarak çalıştı:

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

Bu AJAX çağrı yoluyla doldurulan bir kapsam değişken bir varlıktır foo varlığı, bağlı elemanı yapar. Video etiketinden

Answer 11

Kaldır kaynak etiketi ve bu deneyin ..

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

ve açısal uygulamasında

bunu http://stackoverflow.com bu

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