Youtube Iframe API多个视频使用自定义按钮启动每个视频

问题描述

我有一个加载多个视频的脚本。 每个视频都有一个叠加层和一个自定义按钮。 我目前正在努力解决以下问题。 每个视频都有一个.icon--play和一个.video-overlay元素。 当我单击.icon-play按钮之一时，我希望视频开始播放。 我也希望.video-overlay消失。当只有一部影片时，我就可以使用。

但是我不知道如何将其与多个视频一起使用。该视频不是静态的，并且已加载dynammicall。

有一个array和所有players。那应该可以帮助我分别控制它们。但是我不太擅长js才能理解我该怎么做。任何帮助将不胜感激。

目前，使用以下代码，所有视频均同时开始播放。

import YouTubePlayer from 'youtube-player';

export default class ytPlayer {
    constructor() {
        const videoOverlay = document.querySelector('.player-overlay');
        const videoButton = document.querySelector('.icon--play');
        /**
         * @see https://developers.google.com/youtube/iframe_api_reference#Events
         */
        const stateNames = {
            '-1': 'unstarted',0: 'ended',1: 'playing',2: 'paused',3: 'buffering',5: 'video cued',};

        if (videoButton) {
            const tag = document.createElement('script');

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

            const players = {};
            window.onYouTubeIframeAPIReady = function () {
                console.log('YouTube Iframe API Ready');

                $('.video').each(function () {
                    const videoButton = document.querySelector('.icon--play');
                    // videoButton.addEventListener('click',() => {
                    //     videoOverlay.classList.add('fade');
                    // });
                    players[$(this).attr('id')] = new YT.Player($(this).attr('id'),{
                        videoId: $(this).attr('data-video'),rel: 1,host: 'https://www.youtube-nocookie.com',events: {
                            'onStateChange': onPlayerStateChange($(this).attr('id'))
                        }
                    });

                });

            };

            function onPlayerStateChange(player_id) {

                $(".icon--play").click(function () {
                    $(".video-overlay").hide();
                    $(players[player_id])[0].playVideo();
                });

                return function (event) {

                    if (players[player_id].getPlayerState() == 3 || players[player_id].getPlayerState() == 1) {

                        //stop the auto scrolling
                        console.log("You clicked " + player_id);
                        players[player_id].playVideo();
                    }

                    if (players[player_id].getPlayerState() == 0 || players[player_id].getPlayerState() == 2) {
                        //start auto scrolling.
                        console.log("the video is paused " + player_id);
                        videoOverlay.classList.remove('fade');

                    }

                    if (players[player_id].getPlayerState() == -1 || players[player_id].getPlayerState() == 2) {
                        //start auto scrolling.
                        console.log("the video is playing or paused " + player_id);
                        $(videoButton ).on('hidden.bs.modal',function (e) {
                            players[player_id].stopVideo();
                        })
                    }
                };
            }
        }
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）