Safari浏览器跳转显示HTML5自动播放视频答案

【问题标题】：Safari browser jumps to display HTML5 autoplay videoSafari浏览器跳转显示HTML5自动播放视频
【发布时间】：2017-05-08 08:03:32
【问题描述】：

我有一个 Instagram 内容提要，其中包括最近的帖子。如果帖子是视频，则显示如下：具有自动播放、循环和静音属性的 HTML5 视频。

从美学上讲，结果非常令人愉悦；但是在 Safari 中，当视频完成加载后，浏览器会向下跳到网页到视频的位置。它在 Chrome 中不这样做。

视频不是主要内容，所以我不希望它跳过页面。

问题

有自动播放的 W3C 标准吗？即 safari 或 chrome 是否采用默认方法
解决此问题的最佳方法是什么？

关于灵魂的思考

我可以关闭自动播放，而是使用 JS 触发播放。然而，这似乎有点不必要，并创建了一个新的依赖项。

【问题讨论】：

W3C似乎并没有说自动播放视频是否应该自动滚动到焦点，所以不要认为有对错。我的偏好是取消自动播放并让用户单击以启动任何视频 - 意味着用户总是从一开始就看到视频，并控制带宽使用
谢谢@Offbeatmammal 我知道用户体验的影响。烦人的野生动物园似乎迫使这一点。
我正在处理的一个网站也遇到了同样的问题。我尝试删除自动播放属性并在 JS 超时后触发视频播放。但是，一旦触发播放视频，Safari 就会像以前一样跳回视频。
@slawrence10 你找到解决这个问题的办法了吗？
@MathiasW 还没到日期 :(

标签： html video safari autoplay

【解决方案1】：

*更新：将滚动长度限制为 1500 个单位，直到视频开始播放后 2 秒...

<html>
<head>
    <script type="text/javascript">
    var scrollPosition = 0;
    var videoLoaded = false;
    function bodyOnScroll() {
    // this 1500 value might need to be tweaked less or more depending
    // on how far the scroll to your video is
    if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded)
    {
    // don't scroll 
    document.body.scrollTop=scrollPosition; 
    }
    else
    {
    // reload the variable to match current position
    scrollPosition=document.body.scrollTop;
    }
    }
    function videoOnPlaying(){
    // wait 2 seconds and then disable the max scrollPosition
    // might want to tweak this too depending
    setTimeout(function () {
        videoLoaded = true;
    }, 2000);
    }
    </script>    
</head>
<body onScroll="bodyOnScroll();">
<video autostart onPlay="videoOnPlaying();"></video>

【讨论】：

嘿@pizzaslice 感谢您的贡献。了解用户体验的影响。不幸的是，您的解决方案目前与我的问题一样......它在视频加载时将用户跳转到页面上的某个位置。