我有一个模态。 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>
最佳答案
试试这个
$(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
关于javascript - Modal 触发时自动播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54455149/