Как получить ссылку на существующего проигрывателя YouTube?

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

У меня есть несколько вопросов о том, что происходит, когда я добавляю видео YouTube с использованием исходного кода, как описано выше. Код должен генерировать объект YouTube Player, который обрабатывает видео так, как это нравится пользователям. Когда я генерирую Youtube Player самостоятельно, используя API Youtube Player (вместо использования кода для встраивания), я могу вызвать на нем функции вызова.

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//player.playVideo(); will play the video.

Мой вопрос: как я могу управлять объектом игрока, сгенерированным кодом встраивания? Иначе говоря, со страницы http://www.youtube.com/watch?v=M7lc1UVf-VE, как мне воспроизвести видео, вызвав SOMEPlayer.playVideo()? Когда вы переходите к URL-адресу, доступен объект ytplayer, но он не содержит необходимых функций.

Этот вопрос может быть дубликатом этого.

Ответы

Ответ 1

Это можно сделать следующим образом.

Учитывая общий исходный код встраивания YouTube:

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

а. Добавьте параметр enablejsapi и установите его true

index.html

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" enablejsapi="1" allowfullscreen></iframe>

б. Дайте ему уникальный идентификатор

<iframe id="youtube-video" width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" enablejsapi="1" allowfullscreen></iframe>

с. Загрузите API iFrame и создайте плеер, который ссылается на существующий iFrame

application.js

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

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  console.log("my state changed");
}

Ответ 2

var player = YT.get('id-of-youtube-iframe');

Ответ 3

Maximus S дал совершенно правильный ответ. Официальный API YouTube IFrame Player docs предлагают инициализировать плеер с помощью уникального идентификатора iframe с видео как var yPlayer = new YT.Player('unique-id');.

Для будущих читателей этого вопроса, ищущих способ создания YouTube Player из ссылки на элемент iframe без id (как я), это можно сделать, запустив var yPlayer = new YT.Player(iframeElement);, если вы добавите type="text/html" атрибут к элементу iframe и установить параметр enablejsapi=1 в атрибуте src:

<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>

Полный фрагмент

Ответ 4

Отличный способ сделать это без загрузки IFrame API в родительском окне - это захватить объект из IFrame

var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);

Ответ 5

Лучший ответ почти прав. Вы должны поместить "enablejsapi = 1" в iframe src. Что-то вроде:

<iframe id="youtube-video" width="560" height="315" 
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" 
        allowfullscreen>
</iframe>