如何在向下滚动时停止自动播放 [英] How Stop Auto Play While Scroll Down

问题描述

我在自动播放的标题中添加了视频，但是当用户向下滚动到页面时，我无法停止视频.

I Add Video In Header Which Played Automatically But I'm Unable To Stop Video When User Scroll Down To Page..

推荐答案

您必须为此使用Google youtube API.

You have to use Google youtube API for this purpose.

 // 2. This code loads the IFrame Player API code asynchronously.
	  
	  // Youtuber API
      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: '315',
          width: '560',
		  playerVars : {
                autoplay : 0,
                controls: 0,
                disablekb:0,
                modestbranding:1,
                showinfo:0

            },
          videoId: '3MGrgzTGdtE',
          events: {
			  
            'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
          }
        });
		player2 = new YT.Player('player2', {
          height: '315',
          width: '560',
		  playerVars : {
                autoplay : 0
            },
          videoId: '3MGrgzTGdtE',
          events: {
			  
            //'onReady': onPlayerReady2,
            //'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
          event.target.mute();
        //event.target.playVideo();
      }
	   
      function stopVideo() {
        player.stopVideo();
      }
	  
	   $(window).scroll(function() {
		   var topOfOthnxtDiv = $("#parelaxhome").offset().top; 	
        $("#medicinediv").each( function() {
            if( ($(window).scrollTop() > $(this).offset().top)   ) {
               // $(this).css('opacity',1);
                player.playVideo();
            } if($(window).scrollTop() >= topOfOthnxtDiv)  {
                //$(this).css('opacity',0);
                player.stopVideo();
            }
        }); 
    });
	
	$(document).ready(function(e) {
        $('.pclose').click(function(){
			player2.stopVideo();
		})
		$('.clickpop').click(function(){
			player2.playVideo();
            player2.seekTo(0);
			player2.unMute();
		})
    });

<div class="videodiv">
	   <div id="myframe">
    <div id="play-video"></div>
    <div id="player"></div>
	</div>

这篇关于如何在向下滚动时停止自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！