Как настроить автоматическое воспроизведение звука на видео YouTube при наведении курсора мыши на него на сайте?

Как обеспечить автоматическое включение звука видео на странице при наведении курсора на блок с видео или по нажатию на кнопку, когда пользователь докручивает до этого блока? Как это можно реализовать с учетом того, что видео добавлено через iframe с YouTube и установлен параметр mute=1?
  • 21 июля 2024 г. 10:42
Ответы на вопрос 2
Для настройки автоматического воспроизведения звука на видео YouTube при наведении курсора мыши на него на сайте, можно использовать JavaScript. Вот пример кода, который можно добавить на страницу:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  var player = document.getElementById('player'); // замените 'player' на id вашего iframe с видео
  player.mute(); // устанавливаем видео в беззвучный режим при загрузке
  player.addEventListener('mouseover', function() {
    player.unMute(); // включаем звук при наведении курсора на видео
  });
  player.addEventListener('mouseout', function() {
    player.mute(); // выключаем звук при убирании курсора с видео
  });
});
```

Чтобы обеспечить автоматическое включение звука видео при наведении курсора на блок с видео или по нажатию на кнопку, когда пользователь докручивает до этого блока, можно использовать Intersection Observer API. Вот пример кода:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  var options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  };

  var callback = function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        var player = document.getElementById('player');
        player.unMute(); // включаем звук при попадании видео в область видимости
        observer.unobserve(entry.target);
      }
    });
  };

  var observer = new IntersectionObserver(callback, options);
  observer.observe(document.getElementById('video-block')); // замените 'video-block' на id блока с видео

  // также можно добавить обработчик на нажатие кнопки
  document.getElementById('play-button').addEventListener('click', function() {
    var player = document.getElementById('player');
    player.unMute(); // включаем звук при нажатии на кнопку
  });
});
```

Надеюсь, эти примеры помогут вам реализовать нужный функционал на вашем сайте.
Получилось сделать с помощью YouTube Player API. Звук видео включается при наведении мышкой на видео, но с условием если пользователь до этого кликнет один раз в любое место на странице(можно даже на сам фон с видео).  Не разобрался почему так получается, может у тебя получится что-то сделать с этим. 
iframe {
                pointer-events: none;
            }

<div id="videoWrapper" style="height: 1080px;">
            <div id="player"></div>
        </div>

var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    videoId: 'LXb3EKWsInQ',
                    events: {
                        'onReady': onPlayerReady,
                    }
                });
                document.getElementById('player').src = 'https://www.youtube.com/embed/LXb3EKWsInQ?enablejsapi=1&widgetid=1&autoplay=1&loop=1&playlist=LXb3EKWsInQ';


            }
            function onPlayerReady(event) {

                player.setVolume(0);
                player.playVideo();
                let videoWrapper = document.getElementById('videoWrapper');
                videoWrapper.addEventListener('pointerenter', () => {
                    player.setVolume(100);
                });
                videoWrapper.addEventListener('pointerout', () => {
                    player.setVolume(0);
                    player.playVideo();
                });
            }
Похожие вопросы