我遇到了一个问题，在Safari中循环的HTML5视频元素具有loop属性，在循环时视频的结尾和开头之间有明显的延迟。它冻结了一会儿，然后跳回第一帧。我在Chrome中尝试了相同的页面（尝试了.mp4和.webm两个版本），没有出现这个问题。有没有人注意到这个问题？有没有办法让Safari视频干净地循环，而不是在返回视频开头之前暂停？
我正在使用WordPress沿着Slick carousel jQuery plugin。
下面是我正在使用的代码：

瑞典航空航天局

#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%);
            }
        }
    }
}

超文本标记语言

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

苏丹

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();
    }

先谢了。