iframe youtube api動態更改視頻源

Question

我試圖每次更改iframe源時用戶單擊跳過按鈕，它不起作用。

 var player; 
 
     window.onYouTubePlayerAPIReady = function() { 
 
      alert('called onYouTubePlayerAPIReady'); 
 
      player = new YT.Player('header-video__video-element', { 
 
      events: { 
 
       'onStateChange': ShowMe 
 
      } 
 
      }); 
 
     } 
 

 

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

 
     function ShowMe() { 
 

 
      var sStatus; 
 
      sStatus = player.getPlayerState(); 
 

 
      if (sStatus == -1) alert("Video has not started."); 
 
      else if (sStatus == 0) { 
 
      $('#ytplayer').replaceWith('<a href="page/" target="_blank"><img class="special_hover" src="image" alt="" /></a>') 
 
      } 
 
      else if (sStatus == 1) { 
 
     } //Video is playing 
 
     else if (sStatus == 2) { 
 
     } 
 
     else if (sStatus == 3) { 
 
     } //video is buffering 
 
     else if (sStatus == 5) { 
 
     } //Video is cued. 
 
    } 
 
    
 

 

 
    //CODE TRIGGERED BY BUTTON 
 
    $(this.settings.playTrigger).on('click', function(e) { 
 
    alert('changing source'); 
 
    $("#header-video__video-element").attr('src', "https://www.youtube.com/watch?v=eozsR79JjPM"); 
 
     //document.getElementById('header-video__video-element').setAttribute('src', "https://www.youtube.com/embed/eozsR79JjPM"); 
 
     alert('changed'); 
 
     //player.loadVideoById("95CX2VL0hVY"); 
 
     // e.preventDefault(); 
 
     // that.appendIframe(); 
 
    });

Answer 1

，你註釋掉應該做的工作的player.loadVideoById方法。這裏有一個我的小應用程序的工作示例

//Code from the YouTube iFrame API doc 
//https://developers.google.com/youtube/iframe_api_reference 
var player; 
var id = "V13MbW3oMUw"; 

    //Init API 
    window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('player', { 
     height: '720', 
     width: '960', 
     videoId: "JxfzRNA2_8M", 
     events: { 
     'onReady': onPlayerReady, 
     } 
    }); 
    }; 

// Launch video as it's ready 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

//Change video onclick 
$("#button").click(function(id){player.loadVideoById(id);});