Question

我想用youtube api显示两个youtube视频。当第一个视频结束时，第二个视频到来。我通过改变div风格隐藏了第二个视频。

此代码适用于chrome，因为chrome会在页面加载时加载隐藏的div。但是firefox没有这样做，它会在有$（“＃player”）时尝试加载div。显示（“快”）; jquery代码。有没有其他方法可以做到这一点。我真的需要在firefox的页面加载中加载这个div内容。

<div id="jingle"></div>
    <script >
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag2 = document.createElement('script');
      tag2.src = "//www.youtube.com/iframe_api";
      var firstScriptTag2 = document.getElementsByTagName('script')[0];
      firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var jingle;
      function onYouTubeIframeAPIReady() {
        jingle = new YT.Player('jingle', {
          height: '450',
        width: '720',
        videoId: 'lupOKaNHPAA',
           videoId: 'lupOKaNHPAA',
        playerVars: {'wmode':'opaque', 'showinfo':0, 'autoplay': 1, 'rel': 0, 'controls': 0, 'theme': 'light', 'color': 'white', 'modestbranding':1},
          events: {
            'onReady': onPlayerReady1,
            'onStateChange': onPlayerStateChange1
          }
        });
      }

      function onPlayerReady1(event) {
       // event.target.playVideo();

      }

      function onPlayerStateChange1(event) {

       if(jingle.getPlayerState()==0)
        {
            ytplayer.playVideo();
            $("#jingle").hide("fast");
            $("#player").show("fast");




        }
      }


    </script>

<div id="player" style="display:"></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 ytplayer;

        var interval;

        var stoptime=<?php echo $time;?>;


        var sayi=1;

        var zaman;

        var options = {

            'target': 'player',

            'width': 720,

            'height': 450,

            'videoId': '<?PHP echo $embed;?>',

            'suggestedQuality': 'medium',



            'playerVars': {'wmode':'opaque', 'showinfo':0, 'autoplay': 1, 'cc_load_policy':1, 'cc_lang_pref': <?php if($toplam_dil>=1){echo "'tr'";} else{echo "'en'";} ?>, 'rel': 0, 'controls': 1, 'theme': 'light', 'color': 'white','start': <?PHP echo $s;?>},

            'events': {

                'onStateChange': function(e) {


                    checkTime();

                    showgrade();



                }

            }

        }





        }


        function onYouTubePlayerAPIReady() {


            ytplayer = new YT.Player(options.target, options);



        }



    </script>



<div id="time" style="display:none">0</div>

Answer 1

尝试在CSS中使用display：none和display：block。使用这些属性将确保元素在DOM中。

在Firefox中页面加载的Css隐藏div

1 个答案: