JQuery Youtubeビデオをスクロールで表示

問題：ユーザーがスクロールしたときにYouTubeのビデオ自動再生を試み、ユーザーがスクロールしたときに停止するようにしています。JQuery Youtubeビデオをスクロールで表示

制約：JavaScript Web開発の新機能。

試してみよう：https://jsfiddle.net/kmsdev/gsfkL6xL/私は貼り付けられた行をコピーして、動作させるだけです。私はC++とJavaに精通しているので、少なくともコードの要点を読むことができます。私は正しいコードを持っているようですが、私はHTML5内で正しく呼んでいないかもしれませんか？

ヒーローセクション：

<section class="video_background"> 
    <div class="video_foreground"> 
     <iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
    </div> 
</section>

JSセクション：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="assets/js/scroll.js"></script>

JS：

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

私はhttps://jsfiddle.net/kmsdev/gsfkL6xL/の上にこれを持っているが、それは問題ではないはず。

出典

2016-11-20 F0xcr4f7

ここには動作例があります。これにはすべてのCSS/jsが含まれています。 PlayYTVideosソースで行ったことはわかりませんが、あなたはwindow.onloadを実行するのを忘れているかもしれません。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
 
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script> 
 
    <style type="text/css"> 
 
     iframe { 
 
      width: 200px; 
 
      height: 200px; 
 
      margin: 500px 0; 
 
     } 
 
    </style> 
 
    
 
    <script type='text/javascript'>//<![CDATA[ 
 
    window.onload=function(){ 
 
     var LoadVideo = function(player_id){ 
 
      var Program = { 
 

 
       Init: function(){ 
 
        this.NewPlayer(); 
 
        this.EventHandler(); 
 
       }, 
 

 
       NewPlayer: function(){ 
 
        var _this = this; 
 
        this.Player = new YT.Player(player_id, {}); 
 
        _this.Player.$element = $('#' + player_id); 
 
       }, 
 

 
       Play: function(){ 
 
        if(this.Player.getPlayerState() === 1) return; 
 
        this.Player.playVideo(); 
 
       }, 
 

 
       Pause: function(){ 
 
        if(this.Player.getPlayerState() === 2) return; 
 
        this.Player.pauseVideo(); 
 
       }, 
 

 
       ScrollControl: function(){ 
 
        if(Utils.IsElementInViewport(this.Player.$element[0])) this.Play(); 
 
        else this.Pause(); 
 
       }, 
 

 
       EventHandler: function(){ 
 
        var _this = this; 
 
        $(window).on('scroll', function(){ 
 
         _this.ScrollControl(); 
 
        }); 
 
       } 
 
      }; 
 
      var Utils = { 
 
       /** @author http://stackoverflow.com/a/7557433/1684970 */ 
 
       IsElementInViewport: function(el){ 
 
        if (typeof jQuery === "function" && el instanceof jQuery) el = el[0]; 
 
        var rect = el.getBoundingClientRect(); 
 
        return (
 
          rect.top >= 0 && 
 
          rect.left >= 0 && 
 
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
 
          rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
 
        ); 
 
       } 
 
      }; 
 
      return Program.Init(); 
 
     }; 
 
     LoadVideo('playerA'); 
 
     LoadVideo('playerB'); 
 
     LoadVideo('playerC'); 
 
    }//]]> 
 

 
    </script> 
 
    
 
</head> 
 
<body> 
 
<iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
 
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
 
<iframe id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
 
</body> 
 
</html>

出典

2016-11-20 17:25:22

ありがとううわー！私はwindow.onloadとdidntソース私のYouTubeのJavaScript APIを忘れてしまった – F0xcr4f7

JQuery Youtubeビデオをスクロールで表示

答えて

関連する問題