youtube播放器api遇到问题答案

【问题标题】：having trouble with youtube player apiyoutube播放器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>

（轨道应用）

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

【问题讨论】：

在你的标签中试试这个把你的 Rails 代码，即 #{ youtube_id } as 。
只需在这里资助一个重复的问题，答案很好：stackoverflow.com/questions/7443578/…

标签： javascript ruby-on-rails youtube-api youtube-javascript-api

【解决方案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>

【讨论】：