angularjs - 视频上的 Ng-Src 更改不起作用

Question

我在尝试将源设置为 AngularJS 中的视频时遇到问题。

这是 View 的 HTML 代码:

<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
    <video width="100%" controls>
        <source ng-src="{{levelContent.levelVideo}}" type="video/mp4">
        <!--<source ng-src="Content\img\cortes.mp4" type="video/mp4">-->
        Your browser does not support HTML5 video.
    </video>
    </div>
</div>

这是该 View 的 Controller 代码:

(function () {
    'use strict';

    angular
    .module('iziCooker')
    .controller('LevelController', LevelController);

    LevelController.$inject = ['$scope', 'LevelContentService', '$routeParams', 'LevelService', '$sce' ,'$location'];
    function LevelController($scope, LevelContentService, $routeParams, LevelService, $sce ,$location) {
        $scope.levelId = -1;
        $scope.levelContent = [];

        function GetLevelContent() {
            LevelContentService.SetLevelId($routeParams.levelId);
            $scope.levelId = LevelContentService.GetLevelId();
            LevelService.GetLevelContent($scope.levelId).then(function (data) {
                $scope.levelContent = data;
                LevelContentService.SetLevelName = data.name + " - " + data.description;
                $scope.levelContent.levelVideo = $sce.trustAsResourceUrl(data.levelVideo);
            });
        }

        GetLevelContent();
        console.log("Level Controller Loaded!");
    }

})();

我正在 IE 和 Chrome 上测试我的应用程序，第一个可以正常工作，但我最常使用的第二个不能。

在 IE 上:

在 Chrome 上:

我在 Chrome 上单独测试了视频，效果很好。正如您在上面看到的那样，我也尝试使用硬编码的 src 并且它也可以工作。我认为它可能与 $sce 有关，但似乎不是。

Answer 1

我希望问题得到解决，但以防万一，如果有人需要的话。 有一个解决方法 - HTML5 video element request stay pending forever (on chrome)

分配 URL 后调用以下方法:

function loadVideos() {
    $("video").each(function () {
        $(this).get(0).load();
        $(this).get(0).addEventListener("canplaythrough", function () {
            this.play();
            this.pause();
        });
    });
}

这适用于 Chrome 和 IE。