HTML5ビデオはこのフィドルにHTML5のvideo要素では動作しませんAngularJSのNG-SRCタグ

Question

AngularJS ng-srcで作業されていません。http://jsfiddle.net/FsHah/5/

video要素を見ると、SRCタグは、正しいSRCのURIが移入されていますビデオは再生されません。

not supportedはAngularJSですが、これにはどのような回避策がありますか？

Answer 1

だけフィルタの作成

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

Answer 2

これは、現在、AngularJSのバグのように思える：<video ng-src="{{src}} controls></video>とhttps://github.com/angular/angular.js/issues/1352

交換源は、少なくともビデオにソースをロードするために現時点での唯一の方法であると思われます。うまくいけば、誰かがこれを修正するか、何らかの回避策を提供することになるだろう。

Answer 3

私はajaxコールを試してみましたが、まったく動作していないようです。私は$ scope.srcがajax呼び出しの後に正しい値を持っているのを見ていますが、ng-srcは更新を取得しません。

私は、$ applyで$ timeoutを試みましたが、何もしませんでした。誰もこの問題を理解していますか？私はただの遊びというボタンがあり、ボタンのNG-クリックであなたはNG-繰り返し使用でビデオを再生するには、この

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

を記述する必要が 次のメソッドを使用してビデオを再生するには

Answer 4

インデックス。 助けてくれることを願っています。

Answer 5

回避策

コントローラで

$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

私の応答が遅く、数年ですが、これはまだ解決策を探している人のためです。私も同じ問題がありました。私はYoutubeが別のタグ - iframeを使って埋め込まれたビデオを表示することを思い出しました。 私が望むプロパティを適用したところ、効果がありました。 AngularJS、{{ビデオ}}への新たな人のための

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

は動画へのパスを持って、このページのコントロールの$ scope.video変数です。

Answer 7

これは、AngularJSのデフォルトのセキュリティ対策です。詳細を参照してください：https://docs.angularjs.org/api/ng/service/ $のSCE

compeletlyあなたは、彼らはお勧めしません。しかし

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

を提出あなたのapp.jsでこれを定義することができます「厳格なコンテキストエスケープ」を無効にします。しかし、あなたは、このようなspesificコントローラに使用することがあります。

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

はちょうどこの作品を作るためにバニラJS（通常のJavaScript）を使用します。 あなたがonendのようなイベントを聞いているなら、$ scope（$ apply）を使って再考したいかもしれません。

私の例：

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

Answer 9

あなたは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。

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

表示ファイルで：

Answer 10

私はそうと、要素がページに追加された後に何が起こっていることはsrc属性の角度塗りつぶしだと思いますブラウザは壊れたURLを持つ要素を認識します。私は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> 

これは、AJAX呼び出しを経由して移入されたスコープ変数であるfooの存在に縛ら要素を、作ります。

Answer 11

videoタグから削除ソースタグをと

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

。これを試してみて、あなたの角度のアプリでこの

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