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

Question

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

htmlvideosafariautoplay

6

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

从美学角度来看，结果非常令人愉悦；然而，在Safari中，当视频加载完成时，浏览器会跳到视频的位置，但在Chrome中不会这样做。

该视频不是主要内容，因此我不希望它跳到页面下面。

问题：

1.是否有自动播放的W3C标准？即Safari或Chrome采用默认方法。

2.最佳解决方案是什么？

解决方案思路：

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

- slawrence10

3

W3C似乎没有明确规定自动播放的视频是否应该自动滚动以聚焦，因此我认为没有对错之分。我的偏好是取消自动播放，让用户点击来启动任何视频-这意味着用户始终从头开始观看视频，并控制带宽使用。 - Offbeatmammal

谢谢@Offbeatmammal，我知道这对用户体验有影响。很烦人的是Safari似乎强制执行这一点。 - slawrence10

我在处理一个网站时遇到了同样的问题。我尝试移除autoplay属性并在JS中设置延迟后播放视频，但是一旦视频被触发播放，Safari会像以前一样跳回到视频位置。 - Keenan Payne

1

@slawrence10，你找到解决这个问题的方法了吗？ - Mathias W

1

@MathiasW 迄今为止还没有。 - slawrence10

@slawrence10 我实际上找到了这种情况发生的根本原因。当Safari中启用控件时，它会自动聚焦视频（控件），因此关闭控件会删除自动对焦功能 - 是的，我知道这不是解决问题的真正方法，但至少可以消除焦点行为。 - Mathias W

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pizzaslice · Accepted Answer

*更新：在视频开始播放2秒钟之前将滚动长度限制为1500个单位...

<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>