AngularJS：動画タグが動的に返されたURLソースで動作しない

Question

URL値を取得していて、動画タグのsrc属性でバインドしようとしていますが、動画は表示されません。

直接ソース値を文字列として適用するとうまくいきます。 Say

<video width="400" controls="controls"> 
    <source src="videos/How_Does_AngularJS_Work_Beginners_Angular_Tutorial.mp4" type="video/mp4"> 
    </video> 

また、信頼できるURLのために$ sceフィルタを試みました。 マイフィルター

(function(){ 
    'use strict'; 
    angular.module('videoApp.filters') 
    .filter('trustUrl', ['$sce', function($sce) { 
    return function (recordingUrl) { 
     return $sce.trustAsResourceUrl(recordingUrl); 
    }; 
    }]); 
})(); 

マイコントローラー

(function() { 
'use strict'; 

angular.module('videoApp.controllers') 
    .controller('GetSingleVideoCtrl', ['$scope', '$state', '$stateParams', 'VideoServices', 'AuthService', '$uibModal', 
    function ($scope, $state, $stateParams, VideoServices, AuthService, $uibModal) { 

    var vm = this; 
    vm.result = {}; 
    vm.requestParams = {}; 

    vm.initialize = function() { 
     var videoId = $stateParams.videoId; 

     vm.requestParams = { 
     'sessionId': AuthService.getSessionId(), 
     'videoId' : videoId 
     }; 
     VideoServices.getSingleVideo(vm.requestParams, vm.onGetSingleVideoSuccess, vm.onGetSingleVideosError); 
    }; 

    vm.onGetSingleVideoSuccess = function(response) { 
     $scope.result = response.data.data; 
    }; 
    vm.onGetSingleVideosError = function(response) { 
    }; 
    vm.initialize(); 
    }]); 
})(); 

APIレスポンス

{ 
    "status": "success", 
    "data": { 
     "_id": "57faefe60820a91ac042610a", 
     "name": "Angular Video", 
     "description": "How to use Angular.js to save time", 
     "url": "videos/How_Does_AngularJS_Work_Beginners_Angular_Tutorial.mp4", 
    } 
} 

Answer 1

は、HTMLで

をこのコードを試すには、SRCを含まないでください。角度JSで

、このコードを試してみてください、

$scope.player = videojs("player", { 
     "controls": true, 
     "autoplay": false, 
     "preload": "auto", 
     "loop": false 
}); 
$scope.player.src({ 
     "type": "video/mp4", 
     "src": "videos/How_Does_AngularJS_Work_Beginners_Angular_Tutorial.mp4" 
});