如何在Safari中循环html5 mp4视频时防止延迟？

Question

我遇到了一个问题，在Safari中使用loop属性的HTML5视频元素在视频结束和循环开始之间有明显的延迟。当视频到达结尾时，它会冻结片刻然后跳回到第一帧。我尝试了Chrome中的同一页面（尝试使用.mp4和.webm版本），但没有这个问题。有没有其他人注意到这一点？有没有办法让Safari视频在回到视频开头之前循环播放，而不是暂停播放？

我正在使用Wordpress以及Slick carousel jQuery plugin。

这是我的工作代码：

SASS

#home-slider { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    margin-bottom: 0; 

    & > a { 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 

    .slide { 

     height: 100vh; 
     position: relative; 
     background-repeat: no-repeat; 
     background-position: top center; 

     @include background-size(cover); 

     &.slick-active { 
      z-index: 8000; 
     } 

     @media only screen 
     and (max-width: 750px) { 
      .video-bg { 
       display: none; 
       z-index: -1; 
       video { 
        display: none; 
       } 
      } 
     } 

     .video-bg { 
      z-index: 5000; 
      position: absolute; 
      width: 100vw; 
      height: 100vh; 
      video { 
       position: absolute; 
       top: 50%; 
       left: 50%; 
       min-width: 100%; 
       min-height: 100%; 
       width: auto; 
       height: auto; 
       z-index: -100; 
       -ms-transform: translateX(-50%) translateY(-50%); 
       -moz-transform: translateX(-50%) translateY(-50%); 
       -webkit-transform: translateX(-50%) translateY(-50%); 
       transform: translateX(-50%) translateY(-50%); 
      } 
     } 
    } 
} 

HTML

<div class="slide" style="background-image: url('<?= $slide_bg['url']; ?>');"> 
      <?php if(count($slide_video_bg) > 0) : ?> 
       <div class="video-bg"> 
        <video playsinline muted loop poster="<?= $slide_bg['url']; ?>" preload="auto"> 
         <source src="<?= $slide_video_bg['webm']['url']; ?>" type="video/webm"> 
         <source src="<?= $slide_video_bg['mp4']['url']; ?>" type="video/mp4"> 
        </video> 
       </div> 
      <?php endif; ?> 
      <a class="slide-link" data-video-title="<?= $post->post_title; ?>" data-vimeo-id="<?= $vimeo_id; ?>" data-video-client="<?= $video_client; ?>" data-video-director="<?= $video_director; ?>" data-video-description="<?= $video_description; ?>"></a> 
      <div class="slide-info"> 
       <a class="mobile-play vimeo-link" data-video-slug="<?= $post->post_name; ?>" data-vimeo-id="<?= $vimeo_id; ?>" data-video-title="<?php the_title(); ?>" data-video-client="<?= $slide_client; ?>"></a> 
       <h3 class="slide-client"><a class="vimeo-link" data-video-slug="<?= $post->post_name; ?>" data-vimeo-id="<?= $vimeo_id; ?>" data-video-title="<?php the_title(); ?>" data-video-client="<?= $slide_client; ?>"><?= $slide_client; ?></a></h3> 
       <h3 class="slide-slash">&#47;</h3> 
       <h2 class="slide-title"><a class="vimeo-link" data-video-slug="<?= $post->post_name; ?>" data-vimeo-id="<?= $vimeo_id; ?>" data-video-title="<?php the_title(); ?>" data-video-client="<?= $slide_client; ?>"><?php the_title(); ?></a></h2> 

      </div> 
     </div> 

JS

var $lightbox = $('.lightbox'), 
      $slideLink = $('.slide-link'), 
      slideCount = $('.slide').length, 
      startSlide = Math.floor(Math.random() * slideCount), 
      urlHash = window.location.hash, 
      lastSlide = startSlide; 

$homeSlider.slick({ 
      adaptiveHeight: true, 
      arrows: false, 
      autoplay: true, 
      autoplaySpeed: 4000, 
      cssEase: "ease-in-out", 
      dots: true, 
      fade: false, 
      initialSlide: startSlide, 
      lazyLoad : 'progressive', 
      onBeforeChange: beforeSlickChange, 
      onAfterChange: afterSlickChange, 
      pauseOnHover: false, 
      speed: 800 
     }); 

     initSlides(); 

    function beforeSlickChange(slick, currentSlide, nextSlide) { 
     if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) { 
      if(nextSlide === 0) { 
       $homeSlider.find(".slick-cloned:eq(1) video").get(0).play(); 
      } 
      if(nextSlide === (getSliderCount() - 1)) { 
       $homeSlider.find(".slick-cloned:eq(0) video").get(0).play(); 
      } 
      if(getSlideVideoByIndex(nextSlide).paused) { 
       getSlideVideoByIndex(nextSlide).play(); 
       lastSlide = currentSlide; 
      } 
     } 
    } 

    function afterSlickChange(slick, currentSlide) { 
     if(currentSlide === 0 && lastSlide != 1) { 
      var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0); 
      getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime 
     } else if(currentSlide === (getSliderCount - 1) && lastSlide != (getSliderCount - 2)) { 
      var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0); 
      getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime 
     } 
     getSlideVideoByIndex(lastSlide).pause(); 
    } 

在此先感谢。

Answer 1

我很乐意提供帮助，但我们需要查看您的代码。我们不能真正帮助很多，因为我们不知道你有什么。

这里是一个理论让你开始：

只有.MP4在Safari支持 - 所以一定要确保您的视频是实际上 .MP4格式。如果不是它可能正在播放，但延迟是因为它不被支持。 这只有如此，如果你没有正确地转换它。

或者另一种理论可能，延迟是因为Safari浏览器，几乎循环的视频，刚刚开始好了，所以它会“缓冲区”或“重新加载”重播。

确凿的证据（来自一些快速谷歌引用）表明，第二种理论更反映我所看到的。 Chrome可能在引擎内部有一些特殊代码，与Safari不同。而不管。尝试在类似的question的答案中的代码。

更新

OP添加的代码，还在我的答案旁边坚持为我所研究似乎有回到了这个结论。