Question

我有一个模态。 Modal中的视频演示。模态触发的视频会自动自动播放。该视频将在室外模态环境中关闭，打开模态时视频应自动开始。但是现在它无法按预期运行。

您认为我在哪里出错？谢谢

<!-- Modal Trigger Button --> 
<div> <a data-toggle="modal" data-target="#arcaVideoModal" href="#"></div>


<!-- Modal-->
    <div id="arcaVideoModal"  class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="arcaVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="embed-responsive embed-responsive-16by9">
                    <video id="video1" width="320" height="240" controls>
                        <source src="/Documents/arca-cm18.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>


<script>
    $(document).ready(function () {

        $('#arcaVideoModal').on('shown.bs.modal', function () {
            $('#video1')[0].play();
        })
        $('#arcaVideoModal').on('hidden.bs.modal', function () {
            $('#video1')[0].pause();
        })
        $(window).resize(function () {

            $('#arcaVideoModal').on('shown.bs.modal', function () {
                $('#video1')[0].play();
            })
            $('#arcaVideoModal').on('hidden.bs.modal', function () {
                $('#video1')[0].pause();
            })
        });
    });
</script>

Answer 1

尝试一下

$(document).ready(function () {
    $("#btn_play").on("click", function(){
      $('#arcaVideoModal').modal("show")
    })
    $('#arcaVideoModal').on('shown.bs.modal', function () {
        $('#video1')[0].play();
    });
    $('#arcaVideoModal').on('hidden.bs.modal', function () {
        $('#video1')[0].pause();
    });
    $(window).resize(function () {
        $('#arcaVideoModal').on('shown.bs.modal', function () {
            $('#video1')[0].play();
        })
        $('#arcaVideoModal').on('hidden.bs.modal', function () {
            $('#video1')[0].pause();
        })
    });
});

您在modal.show上暂停视频并在modal.hide上播放视频时犯了错误

供参考：

我为您创建了一个堆叠闪电战

网址：https://stackblitz.com/edit/js-v1nl51

Answer 2

尝试此代码。这应该起作用

$(document).ready(function () {

    $('#arcaVideoModal').on('shown.bs.modal', function () {
        $('#video1').play();
    })
    $('#arcaVideoModal').on('hidden.bs.modal', function () {
        $('#video1').pause();
    })

    $(window).resize(function () {

        $('#arcaVideoModal').on('shown.bs.modal', function () {
            $('#video1').play();
        })
        $('#arcaVideoModal').on('hidden.bs.modal', function () {
            $('#video1').pause();
        })


    });
});

Answer 3

我找到了这个问题的答案。我为可能需要我的朋友分享以下解决方案。 适合所有人的编码。非常感谢。

enter code here     <script>
    $(document).ready(function () {

        //Video play
        $("#btn_play").on("click", function () {
            var video = $('#video1')[0];
            video.play();
        });
    });

</script>

<script>
    $(document).on('hidden.bs.modal', function () {
        var video = $('#video1')[0];
        video.pause();
    });
</script>

播放和暂停功能将被触发以写入单独的脚本标记中。这是我的问题的解决方案。可能有不同的解决方法。我们喜欢不同的想法：）

触发模态后自动播放视频

3 个答案: