Question

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

以下是视图的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>

以下是该视图控制器的代码：

(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。

Answer 2

如果在src更改后在视频元素上调用.load()，视频将会更新。这是一个代码片段，可以用Angular 1组件替换<video>标记t

class VideoController {
    constructor(
        $element
    ) {
        this.$inject = [
            "$element"
        ];
        this.$element = $element;
        this.supportedVideoTypes = ["mp4", "webm"];
    }

    $onChanges($event) {
        this.supportedVideoTypes.forEach((type) => {
            if ($event[type] && $event[type].currentValue) {
                let source = this.$element[0].querySelector(`[type="video/${type}"]`);
                if (source) {
                    source.setAttribute("src", $event[type].currentValue);
                    this.$element[0].load();
                }
            }
        });
    }
}

angular.module("myApp")
    .component("video", {
        bindings: {
            mp4: "<",
            webm: "<"
        },
        controller: VideoController,
        template: `
            <source type="video/mp4"/>
            <source type="video/webm"/>`
    });

Ng-Src更改视频无法正常工作

2 个答案: