youtube播放器api遇到问题

Posted 2023-02-24

【中文标题】youtube播放器api遇到问题

【英文标题】：having trouble with youtube player api

【发布时间】：2013-06-05 11:11:02

【问题描述】：

我试图在我的 rails 应用程序中实现的一个功能是让用户能够控制嵌入的 youtube 视频。我正在使用 youtube player api（此处的指南：https://developers.google.com/youtube/iframe_api_reference）。

在指南中，它总是创建一个新的 YT 播放器：

// 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() 
    player = new YT.Player('player', 
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: 
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      
    );
  

我的问题是如何使用外部“播放”按钮播放已嵌入的 youtube 视频。 错误在player = new YT.Player 行。我不想做一个新的播放器，只是控制已经嵌入的视频。

var player;
function onYouTubePlayerAPIReady() 
    player = new YT.Player('video',   
      events: 
        'onReady': onPlayerReady
      
    );


function onPlayerReady(event)
  event.target.playVideo();
    document.id("start").click(function () 
      player.playVideo();
    );    

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

我的 iframe：<iframe title="YouTube video player" id="video" width="540" height="290" src="http://www.youtube.com/embed/# youtube_id ?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

带有播放按钮的标题视图：

<div id="start">
  <%= image_tag("playback_play.png")  %>
</div>

（轨道应用）

如果您需要更多代码，请告诉我，感谢您的帮助！

【问题讨论】：

在你的

只需在这里资助一个重复的问题，答案很好：***.com/questions/7443578/…

【参考方案1】：

不是直接回答您的问题，而是为您提供潜在的解决方案：

<div id="player"></div>
<div id="start" style="display: none;">
  <%= image_tag("playback_play.png")  %>
</div>

<script>
function onYouTubePlayerAPIReady() 
  player = new YT.Player('player', 
    height: '390',
    width: '640',
    videoId: '# youtube_id ', // not sure if you want that or <%= youtube_id %> in this case
    events: 
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    
  );


function onPlayerReady(event)
  //event.target.playVideo(); // commented out -- uncomment if you want autoplay
  document.id("start").show();


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