Question

我正在使用youtube视频api和打开相同视频的2个单独的灯箱。一个用于移动设备，一个用于桌面设备。

我遇到的问题是，一旦我为移动版本放置单独的代码，桌面版本就会停止工作。我的意思是灯箱仍然打开，但视频不是dsiplay。

桌面（video-home-popup）和移动（video-homepopup-mobile）代码：

<div id="video-home-popup" style="display:none; padding:0px;">
<div id="player"></div>
<script type="text/javascript">
    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', {
            playerVars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: '480',
            width: '640',
            videoId: '4IXAxJ8oPFg',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        /// event.target.playVideo(); 
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.PAUSED) {
            _gaq.push(['_trackEvent', 'Videos', 'Paused',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.ENDED) {
            _gaq.push(['_trackEvent', 'Videos', 'Watch to End',
            player.getVideoUrl()]);
        }
    }
    // ]]>
</script>
</div>
<div id="video-home-popup-mobile" style="display:none; padding:0px;">
<div id="player1"></div>
<script type="text/javascript">
    var player1;

    function onYouTubePlayerAPIReady() {
        player1 = new YT.Player('player1', {
            player1Vars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: 'auto',
            width: 'auto',
            videoId: '4IXAxJ8oPFg',
        });
    }
    // ]]>
</script>
</div>

Answer 1

不要使用两个功能：onYouTubePlayerAPIReady()

<强> Live demo

<div id="player"></div>
<div id="player1"></div>

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('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        player1 = new YT.Player('player1', {
            player1Vars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: 'auto',
            width: 'auto',
            videoId: '4IXAxJ8oPFg',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
      }


      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {

        } else {

        }
      }
function stopVideo() {
        player.stopVideo();
      }

第二个JavaScript函数首先取消

1 个答案: