我有一个模态。莫代尔的视频演示。模态触发视频会自动播放。视频将在模态室外环境中关闭,视频应在模态打开时自动启动。但现在它没有按预期工作。
你认为我在哪里弄错了?萨诺斯
<!-- 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
试试这个代码。这应该工作
$(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();
})
});
});
我找到了这个问题的答案。我可以为我的朋友分享下面的解决方案。适合每个人的好编码。非常感谢。
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>
播放和暂停功能将被触发以写入单独的脚本标记。这是我的问题的解决方案。可能有不同的解决方法。我们喜欢不同的想法:)