HTML5 видео заставляет страницу переходить в Safari 10

Question

Когда моя страница загружается, примерно через 5 секунд окно прокручивается до html-видео, которое является значительным спуском вниз по странице (которая находится в режиме автозапуска). Эта проблема возникла после выпуска Safari 10. Кто-нибудь знает, почему это может иметь место?

Answer 1

У меня та же проблема - если я удалю атрибут autoplay, то этого не произойдет.

Инициирование автозапуска через JS (или даже запуск видео с консоли) также заставляет страницу прыгать.

Answer 2

Это атрибут "controls" в HTML, я обнаружил, что новое обновление Safari дает мало проблем, взгляните на это: https://stackru.com/questions/42692679/video-tag-on-safari -10-идет-вверх-после-несколько-секунда

я воспроизвел вашу проблему (смешивая ее с моей в этом вопросе) на Jsfiddle: https://jsfiddle.net/antonino_R/d9tf0va3/15/ (прокрутите вниз и снова запустите, чтобы воспроизвести проблему, возможно, вам придется быстро запустить и прокрутить вниз опять)

и удаление "элементов управления" решает проблему https://jsfiddle.net/antonino_R/d9tf0va3/16/

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="wrapper-video">
      <video autoplay loop muted >
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
      </video>
    </div>
    <div class="site-centered clearfix">
          <header class="entry-header">
            <h1 class="entry-title">this is a title</h1>
            <h2 class="entry-subtitle">this is some text</h2>
          </header>
    </div>
  </div>
</div>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>this is to scroll down the page and test that it goes up after few seconds</h4>

очевидно, если нужны элементы управления, это исправление недостаточно

Answer 3

Сначала вы должны добавить этот фрагмент кода в нижний колонтитул:

<script>
var myVideo = document.getElementsByTagName("video")[0];
myVideo.controls = "";
</script>

Это сработало для меня. Раньше у меня была проблема, что через 5 секунд при загрузке сайта, просто прыгнул в раздел с видео фоном. У меня было там наложение изображения и без значения min-height: ___px; оверлей был короче высоты видео.