Question

我正在尝试打开并在重叠的块中播放YouTube视频。问题是在Firefox中，当从链接中调用playVideo（）方法时，playVideo（）方法似乎不起作用，这也会使叠加层出现（但它在Chrome中有效）。相反，如果我自动播放视频，则在Firefox中，它会在叠加层出现时启动，而在Chrome中，它会在加载原始页面时启动。我怎样才能有一个既适用于浏览器又可能适用于现代IE的解决方案？

这是代码：

<!DOCTYPE html>
<html>
  <head>

  <style>
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.6;
        opacity:.60;
        filter: alpha(opacity=60);
    }
    .white_content {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 660px;    
        height: 450px;
        margin-left: -330px;
        margin-top: -225px;
        padding: 16px;
        border: 1px solid orange;
        background-color: black;
        z-index:1002;
        overflow: auto;
    }  
  </style>
  </head>

  <body>

        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "showAndPlay();">here</a></p>
        <div id="light" class="white_content">
          This is the lightbox content.
          <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';pauseVideo();">Close</a>
          <div id="player"></div>

        </div>
        <div id="fade" class="black_overlay"></div>
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          //events: {
          //  'onReady': onPlayerReady, // If I uncomment this it works in Firefox but in Chrome the video starts at the page load
          //}
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      function stopVideo() {
        player.stopVideo();
      }
      function pauseVideo() {
        player.pauseVideo();
      }
      function playVideo() {
        player.playVideo();
      }

      function showAndPlay() {
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block';
        playVideo();
      }

    </script>  

  </body>
</html>

Answer 1

解决了在覆盖创建时调用的函数中移动youtube客户端的问题：

<!DOCTYPE html>
<html>
  <head>   
  <style>
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.6;
        opacity:.60;
        filter: alpha(opacity=60);
    }
    .white_content {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 660px;    
        height: 450px;
        margin-left: -330px;
        margin-top: -225px;
        padding: 16px;
        border: 1px solid orange;
        background-color: black;
        z-index:1002;
        overflow: auto;
    }  
  </style>
  </head>

  <body>

        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "showAndPlay();">here</a></p>
        <div id="light" class="white_content">
          This is the lightbox content.
          <a href = "javascript:void(0)" onclick = "stopAndHide();">Close</a>
          <div id="player"></div>

        </div>
        <div id="fade" class="black_overlay"></div>
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      function stopVideo() {
        player.stopVideo();
      }
      function pauseVideo() {
        player.pauseVideo();
      }
      function playVideo() {
        player.playVideo();
      }

      function showAndPlay() {
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block';
        if (!player){
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
              'onReady': onPlayerReady,
            }
          });
        }
        playVideo();
      }

      function stopAndHide(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';   
        stopVideo(); 
      }    
    </script>  

  </body>
</html>

当视频在重叠的块上时，Youtube嵌入iframe api playVideo（）无法在firefox中工作

1 个答案: