滚动时播放youtube视频

Play youtube video when scroll is in view

本文关键字：视频 youtube 播放滚动更新时间：2023-09-26

使用此代码，我一滚动视频就会暂停。我想在视频消失时暂停它。我该怎么做？

//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);
//This function creates an <iframe> (and YouTube player)
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
    height: '100%',
    width: '100%',
    videoId: 'V6Y-ahQFQDA',
    playerVars: {
        'start': '1',
        'color': 'white',
        'controls': '1',
        'showinfo': '0'
    },
    events: {
      'onReady': playOnScroll,
      'onStateChange': playOnScroll
    }
  });
}

前面的部分是加载视频。我认为我的问题在于这个非此即彼的陈述。我一开始滚动日志就开始命令暂停，我无法让它工作。

function playOnScroll() {
  var video = document.getElementById('video');
  var x = video.offsetLeft,
      y = video.offsetTop,
      w = video.offsetWidth,
      h = video.offsetHeight,
      r = x + w, //right
      b = y + h, //bottom
      visibleX,  visibleY,  visible;
      visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
      visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
      visible = visibleX * visibleY / (w * h);
  var percent = 0.6;
  var inView = visible > percent;
      if (inView) {
          console.log('play');
          player.playVideo();
      } else {
          console.log('paused');
          player.pauseVideo();
      }
}
window.addEventListener('scroll', playOnScroll, false);
window.addEventListener('resize', playOnScroll, false);

<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>   
<script>    
var players = new Array();
var playingVideo = false;
var done = false;
var iterator = 0;
var pausedVideo = "";
function createPlayer(playerInfo) {     
    playerVars = { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0, 'loop': 1, 'modestbranding': 1 };
    return new YT.Player(playerInfo.id, {
        height: playerInfo.height,
        width: playerInfo.width,
        videoId: playerInfo.videoId,
        playerVars,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
            }
    });
}
function onPlayerReady(event) {
    // Play/pause video's which do not auto play for seamless playback
        if(event.target.a.src.search('autoplay=0')) {
            event.target.playVideo();
            event.target.pauseVideo();
        }
    }
    function onPlayerStateChange(event) {
    if(event.data === 2){
        pausedVideo = event.target.a.id;
    }
    if(event.data === 1){
        pausedVideo =  "";
    }
    if (event.data == YT.PlayerState.PLAYING && !done) {
        done = true;
    }
}
window.onYouTubeIframeAPIReady = function(){
    players.push(createPlayer({
        id: 'ytPlayer',
        height: '506',
        width: '900',
        videoId: 'l-OgbAqWs20',
        events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    }));
    jq(window).scroll(function(){
        _embedContainerTop = jq('.embed-container').offset().top;
        if( jq(window).scrollTop() >= (_embedContainerTop - 544) && jq(window).scrollTop()<= (_embedContainerTop + 344)) {
            if(typeof players[0].playVideo=="function"){
                players[0].playVideo();
            }
        } else {
            if(typeof players[0].pauseVideo=="function"){
                players[0].pauseVideo();
            }
        }
    });
};