iframe youtube api视频事件设置

videoid更改是否存在事件？iframe youtube api视频事件设置

我正在使用loadVideoById（）函数，我想在发生这种情况时发生事件。

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

UPDATE 这是上面的代码后，什么一切发生的时候：

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中

UPDATE2

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

来源

2015-06-21 The Bumpaster

我假定iframe用于加载视频。如果您更改videoId，那么我认为iframe的src属性发生更改。如果是这样的话，那么你就可以绑定上的iframe的事件将触发每次SRC改变时，因此这将是解决问题的方法之一：

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

在情况下，你不使用jQuery ，你可以使用Javascript的等价事件。希望这可以帮助。

来源

2015-06-21 14:13:24

我不明白你的选择。 '#iframeid'？你的意思是$（'iframe'） –

这是jQuery中的ID选择器。 –

我会试试看，但首先看这没有任何意义O.o –

每次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方法PARAM 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") 
    } 
}

来源

2015-06-21 15:19:08 kishanio

今晚我会试试这个，谢谢 –

是的，我试过了你的方法，但它迟到了一个视频。所以当我点击链接并且发生了一切时，这会保留最后一个视频的轨道，而不是当前的视频。我在那里更新我的代码，所以你可以看到。 –

iframe youtube api视频事件设置

回答

相关问题