我有一个项目,我在 View 中嵌入了一个 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>
这是实现 Controller 更改的代码:
if (videoId.currentTime >= videoId.duration - 1) {
// $state.go('unit_1');
$scope.currentVideo = myObj.units[1].lessonUrl; //set video
videoId.play();
}
仅供引用 - videoId 是视频的变量。它工作正常,因为我可以播放 ()、暂停 ()、获取当前时间等。
所以我知道我正在控制播放器并且我正在成功加载初始视频。
我假设当 $scope 发生变化时,新的视频 URL 会发生变化,但显然我错了。
有什么想法吗?
谢谢!
请您参考如下方法:
如果你想改变视频的 src <source>
元素,你需要调用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>