javascript - javascript 和 jQuery 中的动态 youtube iframe

Question

我要疯了，试图解决这个问题，但它不会按照我想要的方式工作，啊啊，我觉得自己像个 child :/

var videoID;

var tag = document.createElement('script');

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

videoID = sessionStorage.getItem("key");

var onYouTubeIframeAPIReady = function(){
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady
        }
    });
}

//The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
    console.log(videoID);
}

function searchQuery() {
    //Declare selectors
    var queryContainer = $('div.search-box ul');
    var searchBox = $('div#search-bar input[type=search]');
    
    //Declare variables from input elements :)
    var search = $(searchBox).val();
    var checker = search.length;
    
    //Check if the input is empty string
    if(search!=''){
        //Declare the YoutubeAPI link with youtube APIkey
        var theAPI = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+search+"&maxResults=15&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";

        //Get JSON string from YoutubeAPI link
        $.getJSON(theAPI, function(data){

            //Append 5 titles to the div
            for(var i=0; i<=5; ++i){
                
                //Using the kind property from YoutubeAPI determine is it a profile or video
                if(data.items[i].id.kind === 'youtube#video'){
                    $(queryContainer).append('<li><p><a href="#" data-id="' +data.items[i].id.videoId+'">' +data.items[i].snippet.title+'</a></p></li>');
                }else if(data.items[i].id.kind === 'youtube#channel'){
                    $(queryContainer).append('<li><p><a href="https://www.youtube.com/user/'+data.items[i].snippet.title+'">' +data.items[i].snippet.title+'</a></p></li>')
                }
            }
            $('div.search-box a').on('click', function(){
                
                $('div#player-box').empty();
                $('div#player-box').append('<div id="player"></div>');
                sessionStorage.setItem('key', $(this).data("id"));
                
                onYouTubeIframeAPIReady();
                
            });
        });

        //Check if the input value is changing, if it does cleares the previous output
        if(checker){
            $(queryContainer).empty();
        }
        
    }else{
        $(queryContainer).empty();
        return false;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="player"></div>

这里有一个问题:

function onYouTubeIframeAPIReady(){
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady
        }
    });
}

如何在点击事件中删除这个播放器对象并创建一个新的播放器对象？ 我真的想要这个工作，请有人帮忙:)

Answer 1

您是否有特定原因想要销毁播放器对象并重新创建它？如果您的目标只是加载一个新视频，您可以随时这样做:

        $('div.search-box a').on('click', function(){                
            player.loadVideo($(this).data("id"));
            sessionStorage.setItem('key', $(this).data("id"));
        });

(您可能需要以这样的方式声明播放器变量，以便您的点击处理程序可以访问其范围，无论是作为全局变量等)

但是，如果您真的需要销毁播放器本身并重新创建它，我想知道问题是否出在您点击时没有更改“videoID”变量的值(onYouTubePlayerAPIReady函数需要实例化新播放器)；相反，您只需更改 sessionStorage 键的值。