Safari 中未显示滚动视频播放

如何解决Safari 中未显示滚动视频播放

我正在尝试在滚动时模拟视频播放。 这是我使用的参考：https://codepen.io/ollieRogers/pen/lfeLc/

在大多数浏览器中一切正常，但在 Safari iOS 上无法显示视频。

我不确定这是否与视频编解码器或导出有关，或者与用于滚动播放视频的任何参数有关。

我开始认为这与无缝/自动播放视频播放有关，因为放置没有任何这些功能的普通视频效果很好。

这是目前的代码：

<style>
.section--sequence {
  width: 100vw;
  display: block;
}

#v0 {
  position: sticky;
  position: -webkit-sticky;
  top: 58px;
  left: 0;
  width: 100%;
  object-fit: cover;
  height: 100vh;
  outline: none;

  @include respond-to(smartphone) {
    top: 46px;
  }

}
</style>

<div id="videoSequence" class="section--sequence scroll-sequence__container">
      <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload" muted>
      <source type="video/mp4" codecs="avc1.4D401E,mp4a.40.2" src="video.mp4"></source>
      <source type="video/webm" codecs="vp8.0,vorbis" src="video.webm"></source>
      <source type="video/ogg; codecs=&quot;theora,vorbis&quot;" src="video.ogv"></source>
      </video>
</div>

<script>
var frameNumber = 0,// start video at frame 0
        // lower numbers = faster playback
        playbackConst = 500,// get page height from video duration
        setHeight = document.getElementById("videoSequence"),// select video element
        vid = document.getElementById('v0');
        // var vid = $('#v0')[0]; // jquery option
    
    // dynamically set the page height according to video length
    vid.addEventListener('loadedMetadata',function() {
      setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
    });
    
    
    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){
      var frameNumber  = window.pageYOffset/playbackConst;
      vid.currentTime  = frameNumber;
      window.requestAnimationFrame(scrollPlay);
    }
    
    window.requestAnimationFrame(scrollPlay);
</script>