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

如果你无法达到crossbrowser兼容性，我会给你一个建议：

onClick再次调用相同的视频，但参数＆amp; autoplay = 1

Answer 3

对于通过JS播放YouTube视频并不知情，但某些版本的IE不包含JSON对象的实现，该对象可以序列化/反序列化到JSON。您可以找到实施here。

您可能希望通过条件注释包含此内容或使用脚本加载器，以便仅在需要时加载它。

如何让YouTube嵌入式播放器在特定事件中启动视频

3 个答案: