Вопросы Теги

Останавливать видео youtube, закрыв модальный Bootstrap

у меня есть в Вебе модальный, который инициализируется, загрузив страницу и у него есть видео 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>

Спасибо.

1
задан 19.03.2019, 22:54
3 ответа

Вот, в это я 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>
1
ответ дан 02.12.2019, 05:27
  • 1
    Превосходный я sirvió спасибо. – Camilo Rodriguez 20.03.2019, 15:06
  • 2
    Ok Камило, я радуюсь смочь сотрудничать. Я рекомендую тебе помечать как ' aceptada' (вњ “) ответ, если logró решать твою проблему. – Fernando Chamorro 20.03.2019, 15:18

Привет ты мог бы создавать следующего способа: 

$(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">&times;</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.

Надеялся, что он подает тебя, и удача.!!

1
ответ дан 02.12.2019, 05:27

Я надеюсь, что оно ты функционирует :) 

<!-- 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>
0
ответ дан 02.12.2019, 05:27
  • 1
    в моем случае он разместил бы id видео в iframe? – Camilo Rodriguez 20.03.2019, 12:03
  • 2
    обязательно ты должен помещать этикетку <iframe></iframe>? – Vick Muñoz 20.03.2019, 17:45

Теги

Похожие вопросы