Javascript 触发模式时自动播放视频

我有一个情态动词。模态的视频演示。模式触发视频自动播放。视频将在模式室外环境中关闭，当模式打开时，视频应自动启动。但现在它并没有按预期工作

你认为我在哪里犯了错误？谢谢

<!-- 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>

$（文档）.ready（函数（）{
$（'#arcaVideoModal'）.on（'show.bs.modal'，function（）{
$（'#video1'）[0]。播放（）；
})
$（'#arcaVideoModal'）.on（'hidden.bs.modal'，function（）{
$（'#video1'）[0]。暂停（）；
})
$（窗口）。调整大小（函数（）{
$（'#arcaVideoModal'）.on（'show.bs.modal'，function（）{
$（'#video1'）[0]。播放（）；
})
$（'#arcaVideoModal'）.on（'hidden.bs.modal'，function（）{
$（'#video1'）[0]。暂停（）；
})
});
});

试试这段代码。这应该行得通

$(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();
        })


    });
});

---

试试这个代码。这应该行得通

$(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();
        })


    });
});

试试这个

$(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上播放时出错

供您参考：

我已经为你创建了一个stackblitz

Url:

试试这个

$(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上播放时出错

供您参考：

我已经为你创建了一个stackblitz

---

Url:

我找到了这个问题的答案。我为我的朋友分享下面的解决方案，他们可能在我之后需要他们对每个人来说都是很好的编码。非常感谢

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>

在此处输入代码
$（文档）.ready（函数（）{
//视频播放
$（“#btn_play”）。在（“单击”，函数（）{
var video=$（'#video1'）[0]；
video.play（）；
});
});
$（document）.on（'hidden.bs.modal'，function（）{
var video=$（'#video1'）[0]；
video.pause（）；
});

---

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

我找到了这个问题的答案。我为我的朋友分享下面的解决方案，他们可能在我之后需要他们对每个人来说都是很好的编码。非常感谢

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>

在此处输入代码
$（文档）.ready（函数（）{
//视频播放
$（“#btn_play”）。在（“单击”，函数（）{
var video=$（'#video1'）[0]；
video.play（）；
});
});
$（document）.on（'hidden.bs.modal'，function（）{
var video=$（'#video1'）[0]；
video.pause（）；
});

---

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

谢谢你的回复。很抱歉，打开modal后，视频不会开始播放。感谢您的回复。很抱歉，打开模式时视频不会开始播放。您正在触发模式显示暂停和隐藏播放。这是你的错误show=播放，hidden=暂停。。我做了必要的更正，我尝试了您的示例代码，但问题没有改善。您正在触发模式显示暂停和隐藏播放。这是你的错误show=播放，hidden=暂停。。我做了必要的更正，我尝试了你的示例代码，但问题没有改善。感谢回复Manj1790。很抱歉，当您暂停视频并在hideYeah上播放时，打开模式后视频无法开始播放。我想在模式关闭时停止视频。我想在模态打开时启动视频。这就是我想做的，伙计。我还没有找到解决方案。示例中的视频可以正常工作，但视频关闭时不会关闭。在后台工作，但我有个问题。我不知道我在哪里犯了错误。我还没发现。我不想写其他库，它们现在不重要了。我有carousel.js、YandexMap.js、ajax.js和tooltip.js脚本。我有一些风格的图书馆前的机构。我的应用程序引导版本3.3.7 Jquery版本：3.2.1库链接：Body before Body after–感谢回复Manj1790。很抱歉，当您暂停视频并在hideYeah上播放时，打开模式后视频无法开始播放。我想在模式关闭时停止视频。我想在模态打开时启动视频。这就是我想做的，伙计。我还没有找到解决方案。示例中的视频可以正常工作，但视频关闭时不会关闭。在后台工作，但我有个问题。我不知道我在哪里犯了错误。我还没发现。我不想写其他库，它们现在不重要了。我有carousel.js、YandexMap.js、ajax.js和tooltip.js脚本。我有一些风格的图书馆前的机构。我的应用程序引导版本3.3.7 Jquery版本：3.2.1库链接：正文前正文后-