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

我在尝试为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>

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

关于IE：

在Chrome上：

---

我在Chrome上单独测试了视频，效果很好。我还尝试了硬编码的src，正如您在上面看到的，它也可以工作。我原以为可能是$sce的问题，但似乎不是。我希望问题得到解决，但以防万一，如果有人需要的话。 有一个变通办法-

分配URL后，请调用以下方法：

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

这在chrome和IE中都适用。

如果在src更改后在视频元素上调用

.load（）

，视频将更新。下面是一个片段，它将用一个角度1分量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"/>`
    });

class视频控制器{
建造师(
$element
) {
此。$inject=[
“$element”
];
此.$element=$element；
this.supportedVideoTypes=[“mp4”、“webm”]；
}
$onChanges（$event）{
this.supportedVideoTypes.forEach（（类型）=>{
if（$event[type]&&$event[type].currentValue）{
让source=this.$element[0]。querySelector（`[type=“video/${type}”]`）；
如果（来源）{
source.setAttribute（“src”，$event[type].currentValue）；
此。$element[0]。加载（）；
}
}
});
}
}
角度。模块（“myApp”）
.component（“视频”{
绑定：{
mp4：“你试过直接在视频元素上设置源代码吗？我隐约记得有这样一个问题，ng src没有在
元素上工作。我试过直接设置源代码，效果很好。angular和HTML5的这种行为很奇怪。非常感谢！
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"/>`
    });