Safari（IOS）上的Video.js

Question

我在 iOS 设备上的 Safari 上使用 Video.js 播放器时遇到问题。当我尝试播放视频时，视频就会开始播放，如时间线所示。但是，既不播放音频也不播放视频。大约10秒后，视频自动重新开始，声音和视频才从头开始播放。真是令人费解啊。我还尝试了不同的预加载选项。在所有其他浏览器（例如 Mac 上的 Safari）中，播放都可以正常进行。我很茫然，感谢任何建议！

HTML：

<div class="outer-container-sr">
            <div class="video-container-sr">
                <video id="my-video" class="video-js vjs-21-9" controls preload="auto" playsinline data-setup="{}"
                    poster="https://www.sontak.de/Bilder/Lumixers_breit.jpg">
                    <source src="showreel_2023_V7.mp4" type="video/mp4">
                    <!-- Fügen Sie hier alternative Quellen für das Video ein, z.B. WebM oder Ogg -->
                    Dein Browser unterstützt keine Videos.
                </video>
            </div>
</div>

Javascript：

 document.addEventListener("DOMContentLoaded", function () {
            var video = videojs('my-video', {
                controlBar: {
                    volumePanel: false,
                    pictureInPictureToggle: false
                }
            });
        });

CSS：

.outer-container-sr {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}

.video-container-sr {
    position: relative;
    padding-bottom: 42.85%;
    /* 21:9 aspect ratio (100 / 21.85) */
    overflow: hidden;
    border-radius: 10px;
}

.video-container-sr .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vjs-icon-placeholder:before {
    color: white;
    line-height: 150%;
}



/* Playkasten */

.video-container-sr .vjs-big-play-button {
    position: absolute;
    bottom: 16px;
    left: 60px;
    height: 3rem;
    top: initial;
    /* Zurücksetzen der vorherigen Transformationsregel */
    background-color: #2F54E6;
    opacity: 0.75;
    /* Wert zwischen 0 und 1 für die Deckkraft */
    border: 0.05em solid #fff;
}

/* Overlay */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: opacity 0.5s;
    /* Hinzugefügte Übergangsanimation */
    pointer-events: none;
    opacity: 1;
    /* Anfangs sichtbar */
}

.video-container-sr.vjs-has-started .video-overlay {
    opacity: 0;
    /* Auf 0 setzen, wenn das Video gestartet wurde */
}

.video-title {
    font-size: 24px;
    color: black;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
}

/* ... Ihr bisheriges CSS ... */



@media (max-width: 40rem) {

    .video-container-sr .vjs-big-play-button {

        width: 4rem;
        height: 2.5rem;

    }

    .vjs-icon-play,
    .video-js .vjs-play-control .vjs-icon-placeholder,
    .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
        font-family: VideoJS;
        font-weight: normal;
        font-style: normal;
        line-height: 125%;
    }

    .vjs-icon-placeholder:before {
        color: white;
        line-height: 150%;
    }

    .video-container-sr .vjs-big-play-button {
        margin-top: initial;
        margin-left: initial;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4rem;
        height: 2.5rem;
        background-color: #2F54E6;
        opacity: 0.75;
        border: 0.05em solid #fff;


    }

}

该网站托管于： [redesign.sontak.de]

Answer 1

您的 HTML / JS / CSS 代码没有任何问题。

您的 MP4 视频的元数据位于文件后面。如果没有元数据，它就无法播放，因此用户必须首先等待完整的 155mb 下载才能看到图片。

解决方案：
使用工具将其移动到文件的前面。
如果您知道的话，请使用 FFmpeg...或者 Google 搜索此类工具（甚至可能某些在线编辑器也可以做到）。

搜索关键字：

MP4 move metadata atom to front moov

或

MP4 fast start

。

这是因为 MP4 将数据放在称为“atom”（或其他人称为“box”）的部分中。
元数据原子本身称为

moov

。音频/视频字节进入部分

mdat

（媒体数据）。