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

【问题标题】：Ng-Src Change on Video not working视频上的 Ng-Src 更改不起作用
【发布时间】：2016-05-18 18:53:45
【问题描述】：

我在尝试在 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 有关，但似乎不是。

【问题讨论】：

你试过直接在视频元素上设置源吗？我隐约记得遇到过这样的问题，并且 ng-src 无法处理 <source> 元素。
github.com/angular/angular.js/issues/1352
我尝试直接设置源，它就像一个魅力。角度和 HTML5 的行为很奇怪。非常感谢！

标签： angularjs google-chrome html5-video src

【解决方案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。

【讨论】：

【解决方案2】：

如果您在 src 更改后对视频元素调用 .load()，则视频将更新。这是一个 sn-p，它将用 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"/>`
    });

【讨论】：