Не работает параметр проигрывателя YouTube autoplay

380

27 августа 2017, 05:59

Почему-то видео на странице начинает проигрываться автоматически, хотя устанавливаю параметр autoplay:0.

Тоже самое происходит с кодом который полностью скопирован с "YouTube Player API Reference for iframe Embeds". При этом для этого кода параметр автозапуска не работает, но работает соседний controls.

Поэтому не могу понять в чем может быть проблема.

Код следующий:

        window.onYouTubeIframeAPIReady = function() { 
 
            player = new YT.Player('video', { 
                width: 1280, 
                height: 720, 
                playerVars: { 'autoplay': 0, 'controls': 1 }, 
                events: { 
                    'onReady': onPlayerReady 
                } 
            }); 
 
        } 
 
        function onPlayerReady(event) { 
 
            $(btnPlay).on("click", function() { 
 
                var videoId = $(this).attr("data-src"); 
 
                if (lastButton == videoId) { 
                    player.playVideo(videoId); 
                } else { 
                    player.loadVideoById(videoId); 
                    lastButton = videoId; 
                } 
 
            }); 
 
            $('#myModal').on('hidden.bs.modal', function (e) { 
                player.pauseVideo(); 
            }); 
 
        }

P.S. Проверка в onPlayerReady используется так как у меня видео выводится в модальном окне Бутстрапа.

При клике на ссылке на странице из его data атрибута содержащего id (видео из youtube) получаем его и проверяем была ли уже загружена это видео или нет.

Если была, то запускаем, а если нет, то загружаем.

Answer 1

Решение следующее: У YouTube есть функция cueVideoById служащая для загрузки значка определенного видео и подготовки проигрывателя к воспроизведению видеофайла.

Если его использовать вместо .playVideo(), то он просто загрузит видео и не будет запускать.

    var player;
    var btnPlay = $(".arrival__video");
    var lastButton = "";
    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('video', {
            width: 1280,
            height: 720,
            playerVars: { 'autoplay': 0, 'controls': 1 },
            events: {
                'onReady': onPlayerReady
            }
        });
    }
    function onPlayerReady(event) {
        $(btnPlay).on("click", function() {
            var videoId = $(this).attr("data-src");
            if (lastButton != videoId) {
                player.cueVideoById(videoId);
                lastButton = videoId;
            }
        });
        $('#myModal').on('hidden.bs.modal', function (e) {
            player.pauseVideo();
        });
    }