iOS Safari下Video.js播放器播放异常问题求助

问题现象 #

在iOS设备的Safari浏览器中使用Video.js播放器时出现异常：点击播放后，时间轴显示视频已启动，但无音频和视频输出；约10秒后视频自动重启，此时才会从头正常播放音视频。已尝试不同preload选项，其他浏览器（如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">
                    <!-- 此处可添加WebM或Ogg等视频格式备选源 -->
                    您的浏览器不支持视频播放。
                </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 宽高比计算值 */
    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%;
}

/* 大播放按钮样式 */
.video-container-sr .vjs-big-play-button {
    position: absolute;
    bottom: 16px;
    left: 60px;
    height: 3rem;
    top: initial;
    background-color: #2F54E6;
    opacity: 0.75;
    border: 0.05em solid #fff;
}

/* 视频覆盖层 */
.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;
    pointer-events: none;
    opacity: 1;
}

.video-container-sr.vjs-has-started .video-overlay {
    opacity: 0;
}

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

/* 移动端适配 */
@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;
    }
}

可能的解决方案 #

1. 调整预加载与播放触发逻辑
   iOS Safari对视频预加载限制更严格，尝试将preload设为none，并在用户点击播放时手动触发加载：

<video id="my-video" class="video-js vjs-21-9" controls preload="none" playsinline data-setup="{}"
    poster="https://www.sontak.de/Bilder/Lumixers_breit.jpg">
    <!-- 其他内容不变 -->
</video>

同时在JS中添加播放事件监听：

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

    video.on('play', function() {
        if (this.readyState() < 1) {
            this.load();
        }
    });
});

2. 检查视频编码兼容性
   iOS Safari仅支持特定参数的H.264编码视频，需确保视频使用Baseline或Main Profile，分辨率和码率适配移动设备。可使用FFmpeg重新编码：

ffmpeg -i showreel_2023_V7.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k showreel_2023_V7_ios.mp4

3. 排查样式/脚本冲突
   暂时注释自定义CSS中overflow: hidden、z-index等可能影响视频渲染的属性，测试是否恢复正常。同时确保使用最新稳定版Video.js，避免版本兼容问题。

4. 优化视频响应头设置
   确认视频文件的HTTP响应头包含Accept-Ranges: bytes（支持断点续传），iOS Safari对不支持断点续传的视频可能出现加载异常。

内容的提问来源于stack exchange，提问作者sontak.de