JQuery Autoplaying Youtube Videos auf Bildlauf

Problem: Ich versuche, ein YouTube-Video automatisch abspielen zu lassen, wenn der Benutzer dorthin scrollt und stoppt, wenn der Benutzer daran vorbei scrollt.JQuery Autoplaying Youtube Videos auf Bildlauf

Einschränkungen: Neu in der JavaScript-Webentwicklung.

Versucht: Von https://jsfiddle.net/kmsdev/gsfkL6xL/ gehen Ich kopiere eingefügte Zeile für Zeile, nur um es zu arbeiten. Ich bin vertraut mit C++ und Java, damit ich zumindest die Hauptpunkte des Codes lesen kann. Es scheint, dass ich den Code richtig habe, aber ich werde es nicht korrekt in meinem HTML5 aufrufen?

Held Sektion:

<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 Sektion:

<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; 
     } 
    } 
    }); 
});

Ich habe dies auf der https://jsfiddle.net/kmsdev/gsfkL6xL/ aber das sollte keine Rolle spielen.

Quelle

2016-11-20 F0xcr4f7

Hier ist ein Arbeitsbeispiel, das alle css/js in einem enthält. Ich kann nicht sehen, was Sie mit Ihrer Version der PlayYTVvideos-Quelle gemacht haben, aber Sie haben möglicherweise vergessen, window.onload zu machen.

<!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>

Quelle

2016-11-20 17:25:22

Wow Dank! Ich habe window.onload vergessen und habe meine youtube javascript api nicht gefunden – F0xcr4f7

JQuery Autoplaying Youtube Videos auf Bildlauf

Antwort

Verwandte Themen