ajax - HTML5 ビデオが AngularJS ng-src タグで機能しない

Question

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

ビデオ要素を見ると、src タグには正しい src uri が設定されていますが、ビデオは再生されません。

これはAngularJSでサポートされていませんか? これに対する回避策は何ですか?

score 54 · Accepted Answer

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

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

ビューファイル:

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

score 8 · Accepted Answer

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

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

score 5 · Accepted Answer

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

<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);
            };
        });

score 4 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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 呼び出しを介して入力されるスコープ変数です。

score 2 · Accepted Answer

これは、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); });

score 0 · Accepted Answer

これを機能させるには、バニラ js (通常の JavaScript) を使用するだけです。onended のようなイベントをリッスンしている場合は、$scope.$apply() の使用を再検討することをお勧めします。

私の例:

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

ajax - HTML5 ビデオが AngularJS ng-src タグで機能しない

10 に答える 10

Related

Reference