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

Question

我有一个项目,我在视图中嵌入了一个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.它工作正常,因为我可以播放(),暂停(),获取当前时间等.

所以我知道我正在控制播放器并且我正在成功加载初始视频.

我假设当$ scope更改新的视频URL时,但显然我错了.

有任何想法吗？

谢谢!

Answer 1

如果你想更改视频<source>元素上的src ,你需要先调用videoId.load(); , videoId.play();否则只需直接在视频元素本身上更改src属性 - 然后就不需要加载:

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