Как автоматически и со звуком запустить youtube видео на странице?

Question

[Николай]

Всем доброго дня!
Понадобилось автоматом запускать видео при открытии страницы.
Изначально сделал через iframe

<iframe
                id="ytplayer"
                width="480"
                height="270"
                src="https://www.youtube.com/embed/TaY7vohLXK4?controls=1&fs=0&modestbranding=1&rel=0&mute=1&showinfo=0&autoplay=1"
                allow="autoplay; encrypted-media;"></iframe>

Работает, но без звука.
Захотелось со звуком, менял значение параметра mute=1, удалял его, добавлял параметр volume с разными значениями, как итог - не работает автозапуск.

Решил переделать на запуск через js api.
Взял из документации код

<div id="player"></div>
    <script>
        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: '270',
                width: '480',
                videoId: 'TaY7vohLXK4',
                playerVars: { 'autoplay': 1, 'controls': 1 },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            //player.playVideo();
            event.target.playVideo();
            //console.log(player);
        }

        function onPlayerStateChange(event) {
            //console.log(player.getPlayerState());
        }

    </script>

Автозапуск не работает в принципе, пробовал убирать / добавлять playerVars, внутри onPlayerReady пробовал по разному запуск запускать - не помогает.
console.log(player) - объект есть.
В консоли ошибок нет.
console.log(player.getPlayerState()) - выдает -1, 3, -1 (что логично).
Перевернул всю документацию, начитался стэков - ничего не помогает...
Что я делаю не так?

Comments

[wadowad]

Проблема в том, что Вы пытаетесь работать с api до того, пока загрузка содержимого фрейма с плеером ещё не произошла и айпи по сути работает ни с чем. Скрипт должен выполняться после того, как фрейм загрузится. Например, так:

$('#ytplayer').on('load', function() {
  //тут весь код Вашего скрипта
});

Но можно и быстрее запустить по таймеру, т.к. ютуб довольно стабилен, например, так:

setTimeout(() => {
  //тут весь код Вашего скрипта
}, 1000);

[Николай]

wadowad, я выполняю playVideo() по событию onPlayerReady и на этот момент объект в браузере есть.
Я так понимаю это уже после того как загрузился фрейм.
И вы предлагаете в

$("#ytplayer").load( function() { / setTimeout(() => {

поместить весь скрипт?
Так оно никогда не сработает.

[wadowad]

Запустите по таймеру через секунду и всё сработает ;)

[Николай]

wadowad, что конкретно запустить?

Answer 1

[Lynn «Кофеман»]

Никак.

Все современные браузеры явно запрещают автозапуск звука без явного действия человека на странице. Потому что это раздражает людей.

https://developer.mozilla.org/en-US/docs/Web/Media...

Comments

[Okujava-script]

А когда эту статью последний раз обновляли? Ни один из описанных методов не фунциклирует. Можно мютировать и обнулять громкость, но autoplay от этого работать не начнёт. Так же iframe allow="autoplay " тоже когда-то работало, но не сейчас. Отправка HTTP-заголовка тоже не помогла. Так что, сейчас уже предпринято все 100% мер для того, чтобы audio autoplay больше не существовал.

[Николай]

Грусть-печаль, но видимо это истина, ибо чего только не пробовал...

[Антон Литвиненко]

Николай, это бомба-ракета, а не грусть-печаль