Iframe YouTube API动态改变视频源

iframe youtube api dynamically change video source

本文关键字：视频 改变 动态 YouTube API Iframe      更新时间：2023-09-26

我试图改变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();
     });

玩家。您注释掉的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);});
相关文章：