API YouTube iframe Player: как управлять несколькими игроками iframe с помощью их идентификатора - PullRequest
Новая
       2

API YouTube iframe Player: как управлять несколькими игроками iframe с помощью их идентификатора

0 голосов
/ 01 апреля 2020

Я успешно разместил несколько видео YouTube на своей странице, но не могу найти способ индивидуально управлять этими видео, зная, что знаю, как получить их идентификатор. Вот мой код (это тот же файл, я должен только разделить код здесь):

некоторые переменные и код API YouTube: 

let stateVideo = 0;

const tag = document.createElement("script");

tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;

const playerInfoList = [];

Это то место, где я хотел бы контролировать моих игроков 

$('.clickVideo').on('click', function () {
    // Getting their ID
    let playerId = $(this).children().attr('id')

    if (stateVideo === 0) {
        player.playVideo()
        stateVideo = 1;
    } else {
        player.pauseVideo();
        stateVideo = 0;
    }
});

Код API YouTube 

function onYouTubeIframeAPIReady() {
    if (typeof playerInfoList === 'undefined')
        return;

    for (let i = 0; i < playerInfoList.length; i++) {
        createPlayer(playerInfoList[i]);
    }
}

function createPlayer(playerInfo) {
    return new YT.Player(playerInfo.id, {
        height : playerInfo.height,
        width : playerInfo.width,
        videoId : playerInfo.videoId,
    });
}

function onPlayerReady(event) {
    event.target.playVideo();

    const playButton = document.getElementById("video-player");
    playButton.addEventListener("click", function () {
        player.playVideo();
    });
}

let done = false;

function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED || event.data === YT.PlayerState.PAUSED) {
        $('.video__player-image').removeClass('display-none').addClass('display-block');
        $('.video__image').removeClass('display-none').addClass('display-block');
    }
}

Для получения идентификатора в URL и создания нового iframe 

$('.video').each(function () {
        $(this).data('video-url');

        let url = $(this).data('video-url')

        // This is for getting the id of youtube url
        const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        const match = url.match(regExp);
        let url_parser = ( match && match[7].length === 11 ) ? match[7] : false;

        playerInfoList.push({
            id : this.id,
            height : '390',
            width : '640',
            videoId : url_parser
        })
    });

My Html: 

<div class="row">
    <div class="col-md-6">
        <div class="clickVideo">
            <div class="video" id="player1" data-video-url="https://www.youtube.com/watch?v=lmgzF8Xaw-Y">
                <div class="video__image"></div>
                <div class='wrap-player'>
                    <div class="video-container">
                        <div class="video-frame"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="clickVideo">
            <div class="video" id="player2" data-video-url="https://www.youtube.com/watch?v=6V3XrByg77I">
                <div class="video__image"></div>
                <div class='wrap-player'>
                    <div class="video-container">
                        <div class="video-frame"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
...