Почему Safari позволяет видео на основе прокрутки работать должным образом, а другие браузеры - нет? - PullRequest
Новая
       17

Почему Safari позволяет видео на основе прокрутки работать должным образом, а другие браузеры - нет?

1 голос
/ 05 февраля 2020

Я пытаюсь скопировать эту функциональность, с помощью которой можно управлять развитием видео с помощью прокрутки мыши. Необычно, функционал работает безупречно на Safari , но на Firefox, Opera и Brave не работает - на Chrome обновление видео, кажется, блокируется, пока не завершится все событие прокрутки, но он контролирует положение видео. Таким образом, создается впечатление, что он очень зазубренный или отстающий (и, таким образом, можно прокрутить видео прямо на Chrome, не двигаясь вообще). У меня такое ощущение, что мне не хватает чего-то очевидного, связанного с requestAnimationFrame или Intersection Observer. Не могла бы какая-нибудь добрая душа взглянуть и сообщить мне, если это так, и если да, то где? 

<div id="set-height">
  <video width="100%" height="auto" id="v0">
    <source src="Video.webm" type="video/webm"></source>
    <source src="Video.mp4" type="video/mp4"></source>
  </video>
</div>

<script>

  const playbackConst = 150, // lower the number, quicker the animation
        waveVid = document.querySelector('.index-section--scroll-video'),
        vid = document.getElementById('v0');

  let frameNumber = 0,
      myRequest = window.requestAnimationFrame(scrollPlay); 

  function scrollPlay() {
    frameNumber = ((window.innerHeight * 0.7) - vid.getBoundingClientRect().top) / playbackConst; // position of where the animation starts: 100vh - distance to video
    vid.currentTime = frameNumber;
    window.requestAnimationFrame(scrollPlay); // recursive call is necessary for functionality
  }

  const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      window.cancelAnimationFrame(myRequest); // this was needed as Firefox was eating my CPU up on the site
      return;
    } else {
      window.requestAnimationFrame(scrollPlay);
      console.log(vid.getBoundingClientRect().top);
    }
  });

  observer.observe(vid);
});

</script>

1 Ответ

0 голосов
/ 11 февраля 2020

Я нашел более старый вопрос , который содержит ключевой комментарий lalengua, который я просто процитирую здесь:

Важно отметить, что видео должно быть закодировано Ключевые кадры каждые половину или четверть FPS, чтобы этот эффект работал в Firefox и Chrome. И интервал также должен быть настроен для каждого браузера, поскольку они реагируют по-разному. У меня были хорошие результаты с использованием видео контейнера WEBM (VP8). Вы можете использовать флаг -g с FFMPEG для достижения этой цели: ffmpeg -i input.mov -g 10 output.webm

Поэтому, по сути, с моей ногой почти во рту, все, что мне нужно было сделать, это перекодировать видео с помощью -g флаг, чем ближе к 1, тем плавнее анимация. Обратите внимание, что Firefox все еще немного отстает от Chrome с одинаковой кодировкой в ​​обоих браузерах, и Safari по-прежнему является самым плавным с видео .mp4.

...