我正在构建一个脚本,在Bootstrap模式打开时自动播放视频。我在模态打开窗体上使用ng-click,它使用angularjs控制器运行jquery脚本。AngularJS脚本运行两次
$scope.startVideo = function (id) {
$(window).on('shown.bs.modal', function() {
console.log('Id nu is: '+id);
var v = document.getElementById("player"+id);
v.play();
console.log('Now playing: player'+id);
});
}
它起初工作正常。但是,当我关闭第一个模式(并停止视频),并在另一个模式上再次触发剧本时,第一个视频开始播放,第二个视频开始播放。所以现在我有2个视频正在播放。
该控制台回馈:
现在播放:PLAYER1
现在播放:PLAYER1
现在播放:player2
,这可能是该模式的一部分有趣的:
<div class="modal-body">
{{video.subheader}}<br>
<video id="player{{video.id}}" width="100%" height="100%" controls>
<source src="{{video.videourl+video.ext}}" type="video/mp4></source>
</video>
</div>
<!-- Popup modals below -->
<div id="videomodal{{video.id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{video.header}}</h4>
</div>
<div class="modal-body">
{{video.subheader}}<br>
<video id="player{{video.id}}" width="100%" height="100%" controls>
<source src="{{video.videourl+video.ext}}" type="video/mp4"></source>
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
为什么脚本运行两次?当模式打开时,我需要它运行一次。当我停止视频时,关闭模式并打开另一个模式,另一个模式应该开始。不是都。
你正在创建一个新的变量,'v'每次模态打开。当你关闭它时,你所做的变量不会消失。你需要处理那个 – Ronnie
@Ronnie当我在脚本末尾删除v时,删除v;它不会工作。 – TVH7
只是做'document.getElementById(“player”+ id).play();'如果这不能解决它,请为我们创建一个复制问题的小提琴。 – Ronnie