0

Делаю макет простенького сайта,используя Bootstrap. На главной странице есть синяя кнопочка, по нажатию на которую на весь экран выскакивает окно с видео. После закрытия окна звук от видео (и само видео) продолжает воспроизводиться в фоне. Прерывает этот процесс только обновление страницы. Как сделать так, чтобы после закрытия всплывающего окна воспроизведение прекращалось?

// js

var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})

// html 

<div class="modal modal-video fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-0">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Never gonna give you up</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="img/astley.mp4" id="video" allowfullscreen allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
1
  • При закрытии модального окна меняйте src видео на пустоту, а при открытии - на нужный источник. 1 мая в 9:03

1 ответ 1

0

autoplay не предназначено для запуска воспроизведения по команде, для этого применяют $("#video").play(), a для останова соответственно $("#video").pause(). А src перед этим назначить один раз и больше не трогать.

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.