API-интерфейс YouTube iframe loadVideoById () ошибка - PullRequest
Новая
       8

API-интерфейс YouTube iframe loadVideoById () ошибка

7 голосов
/ 20 марта 2012

Я добавляю видео YouTube на веб-сайт компании и хотел бы, чтобы они отображались на устройствах без флэш-памяти.Я играл с API-интерфейсом iframe для YouTube и обновил один из их примеров, чтобы пользователь мог щелкнуть ссылку, чтобы изменить видео в iframe.Отредактированный код: 

<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}

function loadVideo(videoID) {
  if(player) { player.loadVideoById(videoID); }
}

</script>

<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a>

</body>
</html>

Единственное, что я добавил: 

function loadVideo(videoID) {
  if(player) { player.loadVideoById(videoID); }
}

Это прекрасно работает в Safari, Chrome и Firefox, но не работает в IE7, 8 или 9.В IE7 и 8 возвращается ошибка «Объект не поддерживает это свойство или метод».

Это проблема с API или я что-то не так делаю?

Ответы [ 3 ]

5 голосов
/ 04 декабря 2012

У меня была похожая проблема, и оказалось, что вам не следует вызывать какие-либо методы объекта YT.Player (включая loadVideoById), пока onPlayerReady не был вызван.

Выполнение проверки if(player) {...} недостаточно, объект Player будет создан, и некоторые свойства уже будут доступны без необходимых вам методов.

3 голосов
/ 05 марта 2013

Вам нужно будет вызвать функцию загрузки видео из события onPlayerReady.

Например, если вы хотите загрузить видео при щелчке по миниатюре, сделайте это (для этого потребуется jquery, но оно должно понять смысл): 

function onPlayerReady(evt) {

  evt.target.playVideo();

  //declare the click even function you want
  $('#thumbs a).click(function(){

    //get a data-video-id attr from the <a data-video-id="XXXXXX">
    var myvideo = $(this).attr('data-video-id');

    //call your custom function
    loadVideo(myvideo);

    //prevent click propagation 
    return false;
  });
}

Таким образом, вы можете быть уверены, что плеер загружен.

0 голосов
/ 10 декабря 2015

Предотвращение распространения кликов с помощью return false после вызова player.loadVideoById в моем обработчике событий кликов помогло мне.

...