Как я могу остановить воспроизведение встроенного видео iframe youtube, когда модальное окно закрыто? - PullRequest
Новая
       15

Как я могу остановить воспроизведение встроенного видео iframe youtube, когда модальное окно закрыто?

0 голосов
/ 01 сентября 2018

Я пробовал решения на разных постах SO, но ни одна из них не работает должным образом.

У меня есть модал с iframe, который воспроизводит видео, и это, кажется, работает, но я пытался полностью остановить видео, когда закрываю модал, но он все еще пытается воспроизвести.

Элемент iframe 

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/VIDEO?&controls=0&rel=0&showinfo=0&playlist=VIDEO&loop=1&autoplay=1" frameborder="0"></iframe>

Открытие / Закрытие событий 

$(".custom-modal").on("hidden.bs.modal", function (e) {

var iframe = $('#' + e.target.id).find("iframe");

if (iframe.attr("src") && iframe.attr('src').indexOf('autoplay') != -1) {
                var newURL = iframe.attr('src').substring(0, iframe.attr('src').length - 11);
                iframe.attr('src', newURL);
}

})


$('.custom-modal').on('show.bs.modal', function (e) {
var iframe = $('#' + e.target.id).find("iframe");
if (iframe) {
        var videoSrc = iframe.attr("src");
        iframe.attr("src", videoSrc+"&autoplay=1");
}
});

Это, кажется, работает в некоторой степени, и тег autoplay добавляется / удаляется правильно, однако по какой-то причине, когда модальный режим закрыт, видео все еще, кажется, пытается воспроизвести снова, когда я получаю ошибки в консоли (это на самом деле не удается воспроизвести, но я вижу, что это проблема, когда у меня есть несколько видео в разных модах)

enter image description here enter image description here

Таким образом, тег autoplay удаляется, когда модальное окно закрывается, но этот поток все еще существует для видео.

Как я могу полностью остановить видео, чтобы оно не отправляло больше запросов при закрытии модала?

Так что я думаю, что нашел проблему. Iframe загружается на главную страницу при открытии модального окна и всегда присутствует в фоновом режиме. Я попытался удалить iframe через remove(), и это работает и останавливает ошибки, но тогда iframe не загружается второй раз, когда модальное окно открывается повторно.

Мне нужно решение, чтобы выгрузить iframe, но все же разрешить его перезагрузку при открытии модального окна.

1 Ответ

0 голосов
/ 01 сентября 2018

Я только что создал два URL-адреса видео, один с автовоспроизведением и один без, а затем просто переключился между двумя, и это работает для меня: 

var video = "https://www.youtube.com/embed/ogfYd705cRs";
var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", video);
})

$(".custom-modal").on("show.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", autoVideo);
});

Так почему бы не сохранить URL видео в атрибуте данных? 

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="" data-video="https://www.youtube.com/embed/ogfYd705cRs" frameborder="0"></iframe>

, а затем получите URL-адреса видео внутри функций: 

$(".custom-modal").on("hidden.bs.modal", function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var video = iframe.attr("data-video");
    iframe.attr("src", video);
})

$('.custom-modal').on('show.bs.modal', function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var autoVideo = iframe.attr("data-video") + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    iframe.attr("src", autoVideo);
});

И для нескольких видео на модал поместите видео URL на якоря, которые вы используете для открытия модалов: 

<a href="modals/somemodal.html" class="video-anchor" data-target="#modal1" data-video="https://www.youtube.com/embed/ogfYd705cRs" data-toggle="modal">

и вместо этого прослушивание модального открытого прослушивания для щелчка якоря и: 

$(".video-anchor").click(function () {
  var modal = $(this).data("target");
  var video = $(this).attr("data-video");
  var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
  $(modal + ' iframe').attr('src', autoVideo);
});

и когда модал закрывается, не важно, что мы установили как src, так: 

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", "");
})
...