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中，虚拟地循环播放视频，只需将其重新开始，因此它将会＃34;缓冲区＆＃34 ;或者＆＃34;重新加载＆＃34;重播。

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

<强>更新

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

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

1 个答案: