在 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

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

这里有一个理论可以帮助您入门：

Safari 仅支持 .MP4 - 因此请确保您的视频实际上为 .MP4 格式。如果不是，则它可能正在播放，但延迟是因为它不受支持。 这个只有在您没有正确转换它的情况下才会如此。

或者另一个理论可能是延迟是因为在 Safari 中，虚拟循环视频，只是重新开始，所以它会“缓冲”或“重新加载”以重播。

确凿的证据（来自一些快速的谷歌参考）表明，第二种理论更接近我所看到的。 Chrome 的引擎内部可能有一些特殊代码，其呈现方式与 safari 不同。不管。尝试类似 question 的答案中的代码。

更新

OP 添加了代码，仍然会坚持我的答案，因为我的研究似乎已经回到了那个结论。