如何在Bootstrap模式关闭时停止HTML视频？
如何在Bootstrap模式关闭时停止HTML视频？
提问于 2018-07-20 04:05:35
我使用以下代码以模式显示嵌入的视频，但是当我单击close按钮时，背景中的音频不会停止。我尝试了很多关于Stack Overflow的解决方案，但是没有任何帮助。
HTML代码：
<div class="container" id="photocontainer">
<div class="row pt-5 ">
<div class="col-sm-3" id="photocol">
<img src="img/Cinematography/1Jacinta-Tyler.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="col-sm-3" id="photocol">
<img src="img/Cinematography/2Amanda-Mark.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal();">×</span>
<div class="modal-content">
<div class="mySlides" >
<iframe src="player.vimeo.com/video/…; class="mt-5" width="740" height="316" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
<a href="vimeo.com/255103005"; id="clr">
<b>Jacinta & Tyler</b>
</a>
By <a href="vimeo.com/beautifullifestudios"; id="clr">Beautiful Life Studios</a>
.</p>
</div>脚本：
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-20 04:48:08
首先，澄清您使用的是<video>标记还是<iframe>标记。如果你使用的是<video>标签，你可以给你的视频分配id，例如<video id="my_video">，然后通过使用findElementById，你可以在你的closeModal()函数中使用play()和pause()方法。
否则，如果您使用的是<iframe>，请首先为其提供一个id，如下所示：
<iframe id="my_vide" class="embed-responsive-item" src="link_to_some_video"allowfullscreen></iframe>您可以按如下方式进行操作：
function closeModal() {
var video = document.getElementById("vid");
document.getElementById('myModal').style.display = "none";
document.getElementById('vid').src = '';
}如果您有多个视频，您可以将源存储在数组中，只需传递每张幻灯片的索引并将其设置为源即可获取它们，并将其设置为<iframe>。
以下是代码示例：
// Video src
var video_src = [
"https://www.youtube.com/embed/sdUUx5FdySs?autoplay=1",
"https://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1"
];
var current_video = "";
var frame = document.getElementById('vid');
// slides
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
current_video = video_src[n-1];
frame.src = current_video;
}Stack Overflow用户
发布于 2018-07-20 04:11:43
你可以在modal上暂停视频
function closeModal() {
document.getElementById('myModal').style.display = "none";
document.getElementById("youVideoId").pause();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51430920
复制相关文章
相似问题
腾讯云开发者
