即使在关闭laravel中的模式后，视频仍在播放
即使在关闭laravel中的模式后，视频仍在播放
提问于 2021-06-07 15:34:00
我正在尝试制作一个过程，其中视频将在模式下播放，一旦它被点击，当模式关闭时，视频将暂停。但即使我关闭了模式，视频仍在播放。我的代码是：
<div class="modal fade aspire-video-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 37px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video"
allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
<div class="modal-footer col-1 align-self-center">
<button type="button" class="btn btn-secondary aspire-video-close" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>脚本代码为：
$(document).ready(function(){
$(document).on('click', '.video-btn', function(){
event.preventDefault();
let id = $(this).data('id');
console.log(id);
$.ajax({
url: "/watchvideo/"+id,
dataType:"json",
success:function(getVideo){
var d = getVideo.video_link;
console.log(d);
$('#video').html(getVideo.video_link);
// $("#video").attr('src',$getVideo.video_link);
$("#video").attr("src", d+"?
autoplay=1&modestbranding=1&showinfo=0");
$('#myModal').modal('show');
}
})
});
$("#myModal").on('hidden.bs.modal', function (e) {
$("#video").pause();
});
});回答 1
Stack Overflow用户
发布于 2021-06-07 16:48:41
看起来您正在使用Bootstrap。这是一个YouTube模式，我在我的网站上工作，它可能会帮助你。试着实现它。
模式超文本标记语言
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content" style="background-color: transparent; border:none;">
<div class="modal-header p-0 m-0" style="background-color: transparent!important;border:none!important;">
<button type="button" class="close pr-3" data-dismiss="modal" style="color:white;">×</button>
</div>
<div class="modal-body p-0" style="background-color: transparent;">
<div class="embed-responsive embed-responsive-16by9" style="border-radius: 10px;width:100%;max-width:900px;">
<iframe id="dash-video"
src="https://www.youtube.com/embed/QDVLMegSnBQ"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>脚本
$(document).ready(function(){
// -- script to stop the video from playing when closing modal ---
var url = $("#dash-video").attr('src');
$("#myModal").on('hide.bs.modal', function(){
$("#dash-video").attr('src', '');
});
$("#myModal").on('show.bs.modal', function(){
$("#dash-video").attr('src', url);
});
});Note1:将这段代码放在</body>标记之前的末尾。
Note2:可能会在我的视频中尝试一下，然后进行必要的调整来显示您的视频。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67867639
复制相关文章
相似问题
腾讯云开发者
