проблемы с youtube player api

Функция, которую я пытаюсь реализовать в своем приложении rails, — это возможность для пользователей управлять встроенными видео YouTube. Я использую API проигрывателя YouTube (рекомендации здесь: https://developers.google.com/youtube/iframe_api_reference< /а>).

В рекомендациях всегда создается новый проигрыватель YouTube:

// 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>

(приложение для рельсов)

если вам нужно больше кода, дайте мне знать, спасибо за помощь!


person Ox Smith    schedule 09.06.2013    source источник
comment
Попробуйте это в своем теге ‹iframe› поместите свой код rails, например, #{ youtube_id } как ‹%= youtube_id %›.   -  person bunty    schedule 09.06.2013
comment
Просто создайте дубликат вопроса здесь с отличным ответом: stackoverflow.com/questions/7443578/   -  person Ox Smith    schedule 09.06.2013


Ответы (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>
person Hamza Kubba    schedule 13.06.2013