Question

我正在构建一个脚本，当Bootstrap模式打开时，该脚本会自动播放视频。我在模态打开表单上使用ng-click，它运行带有angularjs控制器的jquery脚本。

$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个视频播放。

控制台正在回馈::

正在播放：播放器1   现在播放：播放器1
  现在玩：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">&times;</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>

为什么脚本会运行两次？当模态打开时我需要它运行一次。当我停止视频，关闭模态并打开另一个模态时，另一个模态应该开始。不是两个。

Answer 1

一个快速猜测是你的事件监听器没有从特定模态但是从页面上的任何模态中监听shown.bs.modal。假设每个模态都有自己的id（或数据属性或其他东西）基于视频的id（如果它们没有id，你可以使用jQuery：has selector - ：has（'＃player'+ id） - 或者这些方面的东西）

$scope.startVideo = function (id) {
    $(window).on('shown.bs.modal', '<modal specific selector>', function() { 
        console.log('Id nu is: '+id);
        var v = document.getElementById("player"+id);
        v.play();
        console.log('Now playing: player'+id);
    });
}

AngularJS脚本运行两次

1 个答案: