Dynamic YouTube IFrame в JavaScript и JQuery

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.