web-dev-qa-db-ja.com

HTML5 VideoはAngularJS ng-srcタグで動作しません

AngularJS ng-srcは、このフィドルのHTML5 Video要素では機能しません。 http://jsfiddle.net/FsHah/5/

動画要素を見ると、srcタグには正しいsrc uriが入力されていますが、動画は再生されません。

これは サポートされていない in AngularJS ですか、これの回避策は何ですか？

ajaxhtml5angularjshtml5-video
20
qais

フィルターを作成するだけです：

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

ビューファイルで：

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

これは現在、AngularJSのバグのようです。 https://github.com/angular/angular.js/issues/1352

ソースを<video ng-src="{{src}}" controls></video>に置き換えることが、現時点では少なくともソースをビデオにロードする唯一の方法のようです。誰かがこれを修正するか、何らかの回避策を提供してくれることを願っています。

7
dk123

ビデオを再生するには、次の方法を使用しました。playというボタンがあり、ボタンのngクリックでこれを記述する必要があります

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

ng-repeatでビデオを再生するには、indexを使用します。それが役に立てば幸い。

7
kavinhuh

ビデオタグからソースタグを削除して、これを試してください。

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

そして、あなたのangularアプリでこのようなフィルターを作成します

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

私の回答は数年遅れていますが、これはまだ解決策を探している人向けです。同じ問題がありました。 Youtubeは、埋め込みタグを別のタグ-iframeを使用して表示することを思い出しました。必要なプロパティを適用し、機能しました。

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

AngularJSを初めて使用する場合、{{video}}は、ビデオへのパスを持つこのページのコントロール内の$ scope.video変数です。

4
Soubriquet

これは、AngularJSのデフォルトのセキュリティ予防策です。詳細をご覧ください： https://docs.angularjs.org/api/ng/service/$sce

「厳密なコンテキストエスケープ」を完全に無効にするには、app.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); });
2
nesimtunc

workaround

コントローラー内

$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>
2
Dario Agliottone

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 。

1
Muhammad Reda

起こっているのはAngularが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>

これにより、要素がfooの存在に関連付けられます。これは、AJAX呼び出しを介して入力されるスコープ変数です。

1
Seán Hayes

この作業を行うには、Vanilla js（通常のJavaScript）を使用してください。 onendedのようなイベントをリッスンしている場合は、$ scope。$ apply（）を使用して再検討することをお勧めします。

私の例：

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