у меня есть в Вебе модальный, который инициализируется, загрузив страницу и у него есть видео youtube, которое он воспроизводит автоматически. Проблема, которая у меня есть, состоит в том, что, когда модальный закрывает видео, он продолжает воспроизводить в пользу такого мотива, продолжает слушать аудио пока я перехожу с одного сайта на другой в Вебе. Присоединила JS и HTML модального правда не, как решение этого.
Язык сценариев JavaScript:
$(document).ready(function()
{
$("#mostrarmodal").modal("show");
});
$(".modal-backdrop, #mostrarmodal .close, #mostrarmodal .btn").live("click", function() {
jQuery("#mostrarmodal iframe").attr("src", jQuery("#mostrarmodal iframe").attr("src"));
});
Модальный HTML Bootstrap
<div class="modal fade" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar X</button></div>
<div class="modal-body">
<div class="video-responsive"><iframe src="https://www.youtube.com/embed/wvElRPgXKRs?autoplay=1" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>
</div>
Спасибо.
Вот, в это я referГ - в:
$('.close').on('click', () =>{
$('.video-responsive').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
Cerrar X
</button>
</div>
<div class="modal-body">
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/wvElRPgXKRs?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Привет ты мог бы создавать следующего способа:
$(document).ready(function() {
$('.modal').each(function() {
$this = $(this);
//al abrir play video
$this.on('shown.bs.modal', function() {
toggleVideo('playVideo', $(this));
});
//al cerrar modal pause video
$this.on('hidden.bs.modal', function(){
toggleVideo('pauseVideo', $(this));
})
});
function toggleVideo(state, div) {
var iframe = div.find("iframe")[0].contentWindow;
iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*');
}
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Abrir Video
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Video Youtube</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe width="200" height="150" class="youtubeplayer" id="youtubeplayer" src="https://www.youtube.com/embed/34Na4j8AVgA?list=PLDcnymzs18LWrKzHmzrGH1JzLBqrHi3xQ&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Salir</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
делает главным образом Рукописный шрифт в момент открытия модального воспроизводит видео с:
toggleVideo('playVideo', $(this));
и закрыв модального, он это помещает в паузу:
toggleVideo('pauseVideo', $(this));
функция toggleVideo получает два параметра желанное событие (playVideo, pauseVideo, stopVideo) и элемент, где находится видео.
также ты можешь тестировать это со здесь: Jsfiddle ввиду того, что stack overflow он блокирует контент видео Youtube.
Надеялся, что он подает тебя, и удача.!!
Я надеюсь, что оно ты функционирует :)
<!-- Modal -->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="modal fade" id="myModal" role="dialog">
<a data-controls-modal="myModal" data-backdrop="static" data-keyboard="false" href="#"> <!-- Coloque esta etiqueta y sirve para que no pueda cerrar el modal aprimiendo fuera de éste, así que tiene que apretar el close o el tache -->
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal with Dynamic Content</h4>
</div>
<div class="modal-body">
<video autoplay id="video">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
//$('#video').get(0).play();
$('#myModal').modal({show:true});
});
$('button').click(function(){ //agrego la funcion click a las etiquetas "button" para que al cerrar el modal pongan pausa al video, como vez utilice la etiqueta <video> y con el id del div utilizo la función pause();
$('#video').get(0).pause();
});
</script>