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

sla*_*e10 6 safari video html5 autoplay

我有Instagram内容的摘要,其中包括最近的帖子.如果帖子是视频,则显示如下:带有自动播放,循环和静音属性的HTML5视频.

在美学上,结果非常令人愉悦; 但是在Safari中,当视频加载完毕后,浏览器会将网页向下跳到视频位置.它不会在Chrome中执行此操作.

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

问题

  1. 是否有自动播放的W3C标准?即safari或chrome采用默认方法

  2. 解决这个问题的最佳方法是什么?

关于灵魂的思考

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

piz*_*ice 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>
Run Code Online (Sandbox Code Playgroud)