Как я могу воспроизвести видео паузы iframe YouTube при прокрутке с помощью javascript - PullRequest
0 голосов
/ 13 марта 2020

Я добавил это javascript из https://jsbin.com/cocatuta/15/edit?js, вывод . Я просто хочу, чтобы это сработало для меня. Высота моего iframe больше, чем iframe в вышеупомянутой ссылке. Так что видео сразу останавливается после того, как я начинаю ругаться. Другая проблема, с которой я сталкиваюсь, заключается в том, что она не воспроизводится снова при прокрутке вверх. вот код, который у меня есть.

HTML

<div class="embed-responsive embed-responsive-16by9 wow pulse">

   <iframe id="player" type="text/html" width="640" height="390"
  src="https://www.youtube.com/embed/xAEGDMeYz-Y?enablejsapi=1&autoplay=1;showinfo=0;"
  frameborder="0"></iframe>
</div>

Javascript

<script>
  //play when video is visible
var videos = document.getElementsByTagName("iframe"), fraction = 0.1;

function checkScroll() {

  for(var i = 0; i < videos.length; i++) {
    var video = videos[i];

    var x = 0,
        y = 0,
        w = video.width,
        h = video.height,
        r, //right
        b, //bottom 
        visibleX, visibleY, visible,
        parent;


    parent = video;
    while (parent && parent !== document.body) {
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent = parent.offsetParent;
    }

    r = x + parseInt(w);
    b = y + parseInt(h);


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


    if (visible > fraction) {
      playVideo();
    } else {
      pauseVideo();

    }
  }

};


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', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
};

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);

    //check at least once so you don't have to wait for scrolling for the    video to start
    window.addEventListener('load', checkScroll, false);
};


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      //console.log("event played");
    } else {
      //console.log("event paused");
    }
};

function stopVideo() {
    player.stopVideo();
};

function playVideo() {
  player.playVideo();
};

function pauseVideo() {
  player.pauseVideo();
};



  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...