AngularJS：视频标签与动态返回的URL源不起作用

Question

我收到了url值并试图绑定视频标签的src属性，但视频并未显示。

<video width="400" controls="controls"> 
    <source ng-src="{{result.url | trustUrl}}" type="video/mp4"> 
    </video> 

如果我将直接源值作为字符串应用，它工作正常。说，

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

我也试过sanitize，$ sce过滤器的可信任的URL。 我的过滤器

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