iOS 15.5 Safari视频自动播放失效及低电量模式适配问题咨询

一、能否强制低电量模式下自动播放？ #

无法强制。iOS 15及以上版本的低电量模式会系统级限制静音视频的自动播放行为，这是系统的功耗优化策略，前端代码无法绕过该限制。

二、修复Safari自动添加的播放按钮点击无反应问题 #

当前默认播放按钮失效，通常是视频源加载逻辑或初始化流程存在问题，可通过以下方案修复：

1. 完善视频源加载逻辑 #

你的代码仅通过data-*属性存储视频地址，未主动设置视频源，低电量模式下Safari无法自动解析自定义属性。需通过JS动态加载对应视频源：

const video = document.getElementById('video-collection');
// 按需判断设备类型，可根据实际需求调整阈值
const isMobile = window.innerWidth < 768;
const targetSrc = isMobile ? video.dataset.mobileVid : video.dataset.desktopVid;

// 创建标准source标签并添加到video元素中
const source = document.createElement('source');
source.src = targetSrc;
source.type = 'video/mp4';
video.appendChild(source);

// 手动触发视频加载
video.load();

2. 替换默认播放控件（兜底方案） #

若系统默认按钮仍无响应，可隐藏默认控件，自定义播放按钮绑定播放事件：

/* 隐藏Safari原生媒体控件 */
video::-webkit-media-controls {
    display: none !important;
}

// 创建自定义播放按钮
const customPlayBtn = document.createElement('button');
customPlayBtn.textContent = '播放';
customPlayBtn.style.cssText = `
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
`;
// 将按钮插入到视频父容器中
video.parentElement.style.position = 'relative';
video.parentElement.appendChild(customPlayBtn);

// 绑定播放事件
customPlayBtn.addEventListener('click', async () => {
    try {
        await video.play();
        customPlayBtn.style.display = 'none';
    } catch (err) {
        console.error('播放失败:', err);
        // 可在此添加失败提示逻辑
    }
});

3. 检查视频编码兼容性 #

iOS Safari对视频编码要求严格，确保你的MP4视频符合以下标准：

• 视频编码：H.264 Baseline/Main/High Profile
• 音频编码：AAC-LC
  不符合标准的视频即使加载成功也可能无法触发播放。

三、额外优化建议 #

• 添加预加载属性：给video标签加上preload="metadata"，让浏览器提前加载视频元数据，提升播放触发效率。
• 监听错误事件：捕获视频加载或播放错误，便于快速排查问题：

video.addEventListener('error', (e) => {
    console.error('视频异常:', e.target.error);
});

内容的提问来源于stack exchange，提问作者havremjölk