Как исправить проблему с кликом по видео в мобильном Firefox в jQuery

Question

Когда я добавляю прослушиватель кликов к элементу видео, он работает во всех браузерах, кроме Firefox mobile.

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <h1 id="video-id"></h1>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12" >
            <div class="form-group">
                <button type="button" id="test-button" class="btn btn-info btn-lg" >Open Modal</button>
            </div>
        </div>

        <div class="col-md-12">
            <video class="video"  id="1" playsinline="playsinline" controls muted="muted" width="250px" height="250px" >
                <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"   type="video/mp4">
            </video>
        </div>
        <div class="col-md-12">
            <video class="video"  id="2" playsinline="playsinline" controls muted="muted" width="250px" height="250px" >
                <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"  type="video/mp4">
            </video>
        </div>
        <div class="col-md-12">
            <video  class="video"  id="3" playsinline="playsinline" controls muted="muted" width="250px" height="250px" >
                <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</body>
<script>
    $("body").on('click touchend', '.video', function(el) {
        var id = $(this).attr('id');
        $("#myModal").modal("show");
        $("#video-id").text("video id ="+id);
    });

    $("body").on('click touchend', '#test-button', function(el) {
        $("#myModal").modal("show")
    });

</script>

Когда я нажимаюпри открытии всплывающего элемента видео и показе идентификатора видео, но код не работает на мобильном браузере Firefox. Всплывающее окно браузера не открывается при нажатии видео, но открывается при нажатии кнопки.

Answer 1

Получилось, используя событие воспроизведения на элементе видео.

(function () {
    $('video').on('play', function (e) {
        alert(1);
    });
})();

Попробуйте, работает ли оно для вас.