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視頻事件設置

回答

相關問題