Как проверить началось ли видео или нет?

334

01 марта 2017, 20:50

Имеется блок .wrapper_group, в нем iframe (youtube) .video_groups c видео и блок .block_group поверх него, при наведении на .wrapper_group скрывается .block_group и видно .video_groups, если мышку убрать с .wrapper_group то .block_group обратно покрывает .video_groups. Как сделать, чтобы при нажатии на воспроизведение .video_groups оставался даже при скрытии мышки с .wrapper_group?

$('.wrapper_group').hover(function () {
$(this).children(".block_group").css('visibility', 'hidden');
}, function () {
$(this).children(".block_group").css('visibility', 'visible');
});

Answer 1

Надо проверять состояние плеера, а для этого получать ссылку на него после старта API YouTube. В примере video-head - это id элемента iframe.

var playerVideoHead;
function onYouTubeIframeAPIReady() {
    playerVideoHead = new YT.Player('video-head', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

Изменение состояния плеера делается так:

togglePlayer(playerVideoHead);
function togglePlayer(player) {
    if (typeof player.getPlayerState == "undefined") return;
    var state = player.getPlayerState();
    if (state == YT.PlayerState.PAUSED) {
        player.playVideo();
    } else {
        if (state == YT.PlayerState.PLAYING) {
            player.pauseVideo();
        }
    }
}