Question

我正在获取网址值并尝试使用视频广告代码的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>

我还尝试了可信URL的sanitize，$ 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"
});

Answer 2

尝试不带源标签

    <video width="400" controls src="{{result.url}}></video>

AngularJS：视频代码无法使用动态返回的网址来源

2 个答案: