Как заставить встроенный проигрыватель YouTube запускать видео на определенное событие

Question

Я использую jQuery, чтобы попытаться показать скрытый проигрыватель YouTube, а затем начать воспроизведение видео, как только появится его содержащий div.

Проблема в том, что это работает только в Chrome, а не в IE или FireFox. В IE я вижу ошибку: JSON не определен.

Что я могу сделать, чтобы это работало правильно во всех трех браузерах?

Вот код, который у меня есть:

  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 player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'r3lPq7qY3TU',
      events: {
        'onReady': onPlayerReady
      }
    });

            $('div#target_wrap img, div#main_vid').click(function(event){
                event.preventDefault();
                var p = $('#player');

                p.slideToggle(function(){
                    if (p.is(":visible")) {
                        player.playVideo();
                    } else {
                        player.stopVideo();
                    }
                });
            });
  }

Answer 1

Я думаю, что это счастливый случай, что он работает на Chrome. Например, общая проблема - не ожидание вызова «onYouTubePlayerReady». По крайней мере, для целей отладки вы также захотите сделать что-то вроде:

$('div#target_wrap img, div#main_vid').click(function(event){
    event.preventDefault();
    $('#player').slideToggle(function(){
        if (player.getPlayerState) {
            alert("player state: " + player.getPlayerState());
            if ($('#player').is(":visible")) {
                player.playVideo();
            } else {
                player.stopVideo();
            }
        } else {
            alert("Player not ready yet.");
        }

    });
});

Если вы сможете поделиться большим количеством своего кода, у нас может быть лучший ответ.

Answer 2

На самом деле ничего не известно о воспроизведении видео на YouTube через JS, но некоторые версии IE не включают реализацию объекта JSON, который сериализует / десериализует в / из JSON. Вы можете найти реализацию здесь .

Вы можете включить это с помощью условных комментариев или использовать загрузчик скриптов, чтобы он загружался только при необходимости.

Answer 3

, если вы не можете достичь кроссбраузерной совместимости, я предлагаю вам:

onClick снова вызвать то же видео, но с параметром & autoplay = 1