HTML5视频导致Safari10上的页面跳转

Question

当我的页面加载时，大约5秒后，窗口滚动到html视频，这是页面的重要位置(自动播放)。这是Safari 10发布后的一个问题。有人知道为什么会这样吗？

Answer 1

我也遇到了同样的问题--如果我删除了autoplay属性，它就不会发生。

通过JS启动自动播放(你甚至可以从控制台启动视频)也会使页面跳转。

Answer 2

这是超文本标记语言的"controls“属性，我发现Safari的新更新给出了一些问题，看看这个：https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds

我确实在Jsfiddle上复制了你的问题(在这个问题上和我的问题混在一起)：https://jsfiddle.net/antonino_R/d9tf0va3/15/ (向下滚动并再次运行以重现该问题，您可能需要再次运行并快速向下滚动)

删除"controls“确实可以修复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

首先，您必须在footer中添加以下代码：

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

这对我很有效。之前我有问题，5秒后，当网站加载，只是跳到与视频背景的部分。我有覆盖图像，没有值min- height：___px；覆盖比视频高度短。