Аудио видео начинает воспроизводиться до нажатия кнопки воспроизведения, которая открывает всплывающее видео на YouTube, а также после закрытия видео. - PullRequest
Новая
       10

Аудио видео начинает воспроизводиться до нажатия кнопки воспроизведения, которая открывает всплывающее видео на YouTube, а также после закрытия видео.

0 голосов
/ 15 декабря 2018

Мне нужна помощь с кодом.В коде, который у меня есть, есть кнопка воспроизведения, и когда вы нажимаете кнопку, она открывает видео на YouTube и автоматически начинает воспроизведение.У меня проблема в том, что звук видео начинает воспроизводиться, как только я попадаю на страницу с кнопкой воспроизведения.Даже после нажатия кнопки воспроизведения и закрытия видео звук продолжает воспроизводиться.Я не хочу звук до открытия видео или после закрытия видео.Может кто-нибудь помочь мне с кодом?Что я сделал не так?Я пишу этот код в блоке кода Squarespace для моего сайта.Я получил этот код из fiddle и настроил кнопку воспроизведения.

Ссылка на fiddle: https://jsfiddle.net/solodev/d1thm4cq/?utm_source=website&utm_medium=embed&utm_campaign=d1thm4cq

У меня следующий код: 

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3`enter code here`.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
   <a href="#headerPopup" id="headerVideoLink" target="_blank">
  <span style="font-size: 32px; color: #36B3B3;">
<i class="fas fa-play"></i>
</span>
</a>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sb1ZKzll6c4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

<style>
@charset "utf-8";
/* CSS Document */
#headerPopup{
width:75%;
margin:0 auto;
}

#headerPopup iframe{
width:100%;
margin:0 auto;
}
</style>

</body>

<script>
$( document ).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always  set it to true if you don't provide alternative source in href.
});
});
</script>

1 Ответ

0 голосов
/ 15 декабря 2018

<iframe> воспроизводится, потому что ссылка содержит &autoplay=1, независимо от того, открыт модал или нет.

Вам нужно удалить автозапуск из ссылки, добавить его динамически при открытии модального окна и удалить его снова при закрытии модального: 

$(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
    type: 'inline',
    midClick: true,
    callbacks: {
      open: function() {
        const video = document.querySelector('#headerPopup iframe');
        video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
      },
      close: function() {
        const video = document.querySelector('#headerPopup iframe');
        video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');
      }
    }
  });
});

Помните, что вам также необходимо удалить &autoplay=1 по ссылке <iframe>.
Вот обновленная скрипка .

...