Safari中MP4视频Data URL无法播放问题排查与求助

核心问题分析 #

Chrome与Safari对MP4视频的兼容性要求差异集中在编码格式、Blob处理逻辑和浏览器特定限制三个维度，以下是具体错误点及对应修复方案：

1. 视频编码不符合Safari规范 #

Safari仅支持H.264编码（Baseline/Main/High Profile）+ AAC音频的MP4文件，而Chrome支持VP9等更多编码格式，若视频采用Safari不兼容的编码，必然无法播放。

修复方案：
使用FFmpeg将视频转码为Safari兼容格式，执行命令：

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

• -profile:v baseline：锁定Safari支持的基础编码配置
• -level 3.0：适配多数设备性能阈值
• -c:a aac：指定音频编码为Safari兼容的AAC格式

2. Base64转Blob的逻辑存在兼容性漏洞 #

你原代码中循环遍历创建Uint8Array的方式，在Safari中可能因字符编码转换的细微差异导致Blob损坏。

修复方案：简化转换逻辑，使用更兼容的API创建Uint8Array：

<video autoplay muted loop controls playsinline id='videoDataURL'></video>
<script>
var base64Data = '$base64encoded_video_content';
var binaryData = atob(base64Data);
// 用Uint8Array.from直接转换，避免循环可能的错误
var uint8Array = Uint8Array.from(binaryData, char => char.charCodeAt(0));
var blob = new Blob([uint8Array], { type: 'video/mp4' });
var blobUrl = URL.createObjectURL(blob);
var video = document.getElementById('videoDataURL');
video.src = blobUrl;
// 手动触发加载，Safari有时需要显式调用
video.load();
</script>

3. Safari对Blob URL和CORS的严格限制 #

Safari对Blob URL的使用有更严苛的规则，若视频资源存在跨域问题，会直接阻止加载。

修复方案：

• 给video标签添加crossorigin="anonymous"属性
• 若视频从PHP后端输出，确保响应头包含Access-Control-Allow-Origin: *（或指定允许的域名）

4. Source标签写法遗漏关键属性 #

你测试的source标签写法缺少Safari必需的属性，且无错误排查机制。

修复方案：完善video标签配置，并添加错误监听定位问题：

<video id="video" class="video" autoplay muted loop controls playsinline crossorigin="anonymous">
  <source src="images/video.mp4" type="video/mp4">
</video>
<script>
// 添加错误监听，查看具体错误原因
document.getElementById('video').addEventListener('error', function(e) {
  console.error('视频加载错误:', this.error);
});
</script>

额外排查步骤 #

1. 直接在Safari地址栏输入视频URL，确认视频本身能否播放——若不能，优先解决编码问题
2. 打开Safari开发者工具（Cmd+Opt+I），查看「网络」面板的视频请求状态：
   • 状态码404：检查视频路径是否正确
   • CORS报错：配置后端CORS响应头
3. 查看「控制台」面板的报错信息，定位具体问题

内容的提问来源于stack exchange，提问作者Roy_In