Question

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

Answer 1

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

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

Answer 2

它是＆＃34;控制＆＃34; 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/ （向下滚动并再次运行以重现问题，您可能需要再次运行并快速向下滚动）

并删除＆＃34;控件＆＃34;确实解决了问题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;叠加比视频高度短。

HTML5视频使页面在Safari 10上跳转

3 个答案: