HTML5 视频导致页面在 Safari 10 上跳转答案

【问题标题】：HTML5 Video Causes Page to Jump on Safari 10HTML5 视频导致页面在 Safari 10 上跳转
【发布时间】：2017-02-08 07:59:46
【问题描述】：

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

【问题讨论】：

这个一点都不清楚。此页面是您的实现还是您报告了可能的 Safari 错误？
这是我在 safari 10 之前开发的网站上的一个页面。它可能是一个可能的错误或 safari 上滚动到视频的新功能。这就是我想要弄清楚的。
你能提供链接和代码的相关部分吗？
本站为视频页面跳转示例。如果视频不在视野范围内，它会将页面滚动到正在播放的视频。 camendesign.com/code/video_for_everybody/test.html
@TomMoore 我在 Safari 10 中遇到了同样的问题。此外，我无法在您链接的页面上重现该问题。你找到解决办法了吗？

标签： html video safari safari10

【解决方案1】：

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

通过 JS 启动自动播放（甚至从控制台启动视频）也会使页面跳转。

【讨论】：

【解决方案2】：

它是 HTML 上的“控件”属性，我发现 Safari 上的新更新很少出现问题，看看这个：https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds

我确实在 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>

显然，如果需要控件，则此修复还不够好

【讨论】：

【解决方案3】：

首先，您必须在页脚中添加这段代码：

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

这对我有用。在我遇到问题之前，网站加载后 5 秒后，就跳到了带有视频背景的部分。我有覆盖图像并且没有值 min-height: ___px;叠加层短于视频高度。

【讨论】：

在 safari 和 google chrome 上遇到同样的问题。