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"));
        });

（您可能需要声明播放器变量，使您的点击处理程序可以访问其范围，无论是作为全局范围等）。

但是，如果你真的需要销毁播放器本身并重新创建它，我想知道问题在于，在你点击的时候，你并没有改变＆＃39; videoID＆＃的价值39;变量（onYouTubePlayerAPIReady函数需要实例化新播放器）;相反，您只需更改sessionStorage键的值。

javascript和jQuery中的动态youtube iframe

1 个答案: