angularjs 在angular js项目中强制更新html5视频源

bsxbgnwa  于 2022-10-31  发布在  Angular
关注(0)|答案(1)|浏览(171)

我有一个项目,我在视图中嵌入了一个html5视频。
我使用$scope动态填充源代码。
我填充播放器的初始视频工作正常。
在视频结束时,我尝试将视频的src更改为下一个剪辑,直到它结束。
我的问题是视频src不更新,只是播放初始剪辑。
下面是html(非常简单):

<video style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
    <source ng-src="{{currentVideo}}" type="video/mp4">
</video>

下面是从控制器实现更改的代码:

if (videoId.currentTime >= videoId.duration - 1) {
    // $state.go('unit_1');

    $scope.currentVideo = myObj.units[1].lessonUrl; //set video
    videoId.play();
}

videoId是视频的var。它工作得很好,因为我可以播放()、暂停()、获取currentTime等。
因此,我知道我正在控制播放器,并成功加载了初始视频。
我假设当$scope改变时,新的视频URL会改变,但显然我错了。
有什么想法吗?
谢谢你!

i2byvkas

i2byvkas1#

如果你想修改视频的<source>元素的src,你需要调用videoId.load();beforevideoId.play();,否则直接修改视频元素本身的src属性--这样就不需要加载了:

<video ng-src="{{currentVideo}}" style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
</video>

相关问题