iframe youtube api 视频事件设置

Question

videoId 有变化吗？

我正在使用 loadVideoById() 函数，并且我想在发生这种情况时创建一个事件。

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

更新 这是在上面的代码之后发生的事情：

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

videoID = sessionStorage.getItem("key");

function onYouTubeIframeAPIReady(){
    console.log("ucito api");
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onApiChange': onPlayerApiChange
        }
    });
}

你也应该知道 onYoutubeIframeAPIReady() 会把 iframe 放进去

更新2

var videoID;
var videoTitle;
var channelID;
var imgURL;
var viewsCount;
var newVideoId;

function newYoutubePlayer() {
    //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-name="'+data.items[i].snippet.title+'" 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(){
                newVideoId = $(this).data("id");
                sessionStorage.setItem('id', newVideoId);
                player.loadVideoById({
                    "videoId": newVideoId
                });


                // THIS IS FOR GETTING THE VIEWS NUMBER
                    var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(viewsAPI, function(data){
                        console.log("ucitava broj pregleda");
                        viewsCount = data.items[0].statistics.viewCount;
                        $('div#views').empty();
                        $('div#views').append('<p><span data-icon="&#xe087;"></span> '+viewsCount+'</p>');
                    });


                    //THIS IS FOR GETTING THE AUTHORS IMAGE
                    var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(channelAPi, function(data){
                        console.log("ucitava id kanala");
                        channelID = data.items[0].snippet.channelId;

                        var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                            $.getJSON(imgAPI, function(data){
                                console.log("ucitava sliku kanala");
                                imgURL = data.items[0].snippet.thumbnails.default.url;
                                $('div#user-icon').empty();
                                $('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
                            });
                        });
            });           

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

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            var sessionVideoID = sessionStorage.getItem('id');
            function onYouTubeIframeAPIReady(){
                console.log("ucito api");
                player = new YT.Player('player', {
                    height: '315',
                    width: '560',
                    videoId: sessionVideoId,
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });

                // THIS IS FOR GETTING THE VIEWS NUMBER
                    var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(viewsAPI, function(data){
                        console.log("ucitava broj pregleda");
                        viewsCount = data.items[0].statistics.viewCount;
                        $('div#views').empty();
                        $('div#views').append('<p><span data-icon="&#xe087;"></span> '+viewsCount+'</p>');
                    });


                    //THIS IS FOR GETTING THE AUTHORS IMAGE
                    var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(channelAPi, function(data){
                        console.log("ucitava id kanala");
                        channelID = data.items[0].snippet.channelId;

                        var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                            $.getJSON(imgAPI, function(data){
                                console.log("ucitava sliku kanala");
                                imgURL = data.items[0].snippet.thumbnails.default.url;
                                $('div#user-icon').empty();
                                $('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
                            });
                        });
            }

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

            function onPlayerStateChange( event ) {

                if (  event.target.getVideoData().video_id == newVideoId ) {

                    // THIS IS FOR GETTING THE VIEWS NUMBER
                    var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(viewsAPI, function(data){
                        console.log("ucitava broj pregleda");
                        viewsCount = data.items[0].statistics.viewCount;
                        $('div#views').empty();
                        $('div#views').append('<p><span data-icon="&#xe087;"></span> '+viewsCount+'</p>');
                    });


                    //THIS IS FOR GETTING THE AUTHORS IMAGE
                    var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                    $.getJSON(channelAPi, function(data){
                        console.log("ucitava id kanala");
                        channelID = data.items[0].snippet.channelId;

                        var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
                            $.getJSON(imgAPI, function(data){
                                console.log("ucitava sliku kanala");
                                imgURL = data.items[0].snippet.thumbnails.default.url;

                                $('div#user-icon').empty();
                                $('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
                            });
                        });

              }

                if (player.getPlayerState() == 1) {
                    // THIS IS FOR GETTING THE VIDEO TITLE
                    $('div#title').empty();
                    $('div#title').append('<p>'+ player.getVideoData().title+'</p>');

                     //THIS IS FOR GETTING THE AUTHORS NAME
                    $('p.user').empty();
                    $('p.user').append('<a href="#">'+player.getVideoData().author+'</a>');
                }

            }

        });

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

    }else{
        $(queryContainer).empty();
        return false;
    }
}

Answer 1

我假设iframe 用于加载视频。如果您更改 videoId 那么我认为 iframe 的 src 属性已更改。如果是这种情况，那么您可以在 iframe 上绑定一个事件，该事件将在每次更改 src 时触发，因此它将成为您问题的解决方案之一：

$('#iframeid').load(function(){
    alert('videoID changed');
    //Your code logic here.
});

如果您不使用 jQuery，您可以使用 Javascript 的等效事件。希望这会有所帮助。

Answer 2

每次 Youtube 播放器更改其状态时，您都可以在实例化播放器时添加事件侦听器。

添加事件监听器

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: '<VIDEO ID>',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange // adding event listener here 
    }
  });
}

这将调用函数onPlayerStateChange

function onPlayerStateChange(event) {
     console.log( "New video change" );
}

使用loadVideoById 并密切关注onPlayerStateChange 方法参数event.target。根据您的要求更新代码。

// this code of yours will call my onPlayerStateChange function.
var newVideoId = $(this).data("id");
$('div.search-box a').on('click', function(){
   sessionStorage.clear();
   sessionStorage.setItem('key', $(this).data("id"));
   player.loadVideoById({
   "videoId": newVideoId              
   });
});

function onPlayerStateChange(event) {
  if (  event.target.getVideoData().video_id == newVideoId ) {
    console.log("new video loaded")
  }
}