javascript 和 jQuery 中的动态 youtube iframe

Posted 2023-02-24

【中文标题】javascript 和 jQuery 中的动态 youtube iframe

【英文标题】：Dynamic youtube iframe in javascript and jQuery

【发布时间】：2015-09-04 16:49:56

【问题描述】：

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

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

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

【参考方案1】：

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

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

（您可能需要以这样一种方式声明 player 变量，以便您的点击处理程序可以访问其范围，无论是作为全局变量等）

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

【讨论】：

我会试一试，我正在尝试制作一个 youtube 网络应用程序，只是玩弄它。

好的，我试过了，什么也没发生，问题出在这里，我想让播放器停止，并加载一个新视频，但什么也没做。我不想刷新整个页面，我不想打开新页面，我希望他在点击链接时在同一页面上加载新视频。 smth like: a.link -> on.click -> player.stop -> player.loadNew -> player.play

我使用 sessionStorage.set() 和 sessionStorage.clear() 解决了这个问题，更改了 player.loadVideoById 并且成功了 :) 谢谢伙计！