JavaScript 和 jQuery 中的动态 youtube iframe

Question

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

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 键的值。