如何在视口中播放 Youtube 和 Facebook 视频

如何在视口中播放Youtube和Facebook视频？我正在尝试添加 facebook 视频，但它在视口中时无法播放？告诉我如何管理YouTube和Facebook视频以在视口中播放？如果我使用 iframe for youtube，我该怎么在视口中播放视频？

<html>
<head>
  <style>
    #e1,
    #e2,
    #e3,
    #e4,
    #e5,
    #ytplayer {
      height: 390px;
      width: 640px;
      display: block;
      opacity: 0;
    }
  </style>
  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Frjsb.mpfm%2Fvideos%2F2750454621691562%2F&show_text=0&width=560" width="560" height="316" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
    allowFullScreen="true"></iframe>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    // Replace the 'ytplayer' element with an <iframe> and
    // YouTube player after the API code downloads.
    var player;
    function onYouTubePlayerAPIReady() {
      player = new YT.Player('ytplayer', {
        height: '390',
        width: '640',
        playerVars: {
          autoplay: 0
        },
        videoId: 'M7lc1UVf-VE'
      });
    }
    $(window).scroll(function() {
      $("iframe").each(function() {
        if ($(window).scrollTop() > $(this).offset().top - 200) {
          $(this).css('opacity', 1);
          player.playVideo();
        } else {
          // $(this).css('opacity',0);
          player.stopVideo();
        }
      });
    });
  </script>
</head>
<body>
  <div id="ytplayer">Youtube player here</div>
  <div id="e4">Some element 4</div>
  <div id="e5">Some element 5</div>
</body>
</html>

明白了

。css 中的opacity: 0;阻止视频显示

  <html>
    <head>
      <style>
        #e1,
        #e2,
        #e3,
        #e4,
        #e5,
        #ytplayer {
          height: 390px;
          width: 640px;
          display: block;
        }
      </style>
      <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Frjsb.mpfm%2Fvideos%2F2750454621691562%2F&show_text=0&width=560" width="560" height="316" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
        allowFullScreen="true"></iframe>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
        // Load the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        // Replace the 'ytplayer' element with an <iframe> and
        // YouTube player after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
          player = new YT.Player('ytplayer', {
            height: '390',
            width: '640',
            playerVars: {
              autoplay: 0
            },
            videoId: 'M7lc1UVf-VE'
          });
        }
        $(window).scroll(function() {
          $("iframe").each(function() {
            if ($(window).scrollTop() > $(this).offset().top - 200) {
              $(this).css('opacity', 1);
              player.playVideo();
            } else {
              // $(this).css('opacity',0);
              player.stopVideo();
            }
          });
        });
      </script>
    </head>
    <body>
      <div id="ytplayer">Youtube player here</div>
      <div id="e4">Some element 4</div>
      <div id="e5">Some element 5</div>
    </body>
    </html>

相关内容

最新更新

热门标签：