Safari 11.3使用<link rel=preload>报as值无效错误求助

这是个挺典型的Safari早期预加载兼容性坑，我来帮你拆解下问题原因和可行的解决办法：

问题根源 #

虽然MDN文档和兼容性工具都标记Safari 11.3支持preload特性，但实际这个版本的Safari对媒体类资源（视频/音频）的preload实现存在明显bug：

• 它对as="video"的识别并不完善，哪怕你已经正确指定了type="video/mp4"
• 部分场景下，即使是同源视频资源，Safari也会因为缺少crossorigin属性而判定as值无效

可行的解决办法 #

1. 添加crossorigin属性（推荐优先尝试）

即使你的视频是同源资源，给<link>标签加上crossorigin="anonymous"属性，很多时候能直接解决这个报错：

<link rel="preload" as="video" type="video/mp4" href="video/2_1.mp4" crossorigin="anonymous" />

这是因为Safari在处理媒体资源预加载时，对跨域属性的校验逻辑和Chrome不一致，同源资源也需要显式声明才能通过校验。

2. 降级使用as="fetch"

如果上面的方法无效，可以把as的值换成fetch，虽然浏览器不会针对视频类型做特定优化，但至少能正常预加载资源且不报错：

<link rel="preload" as="fetch" type="video/mp4" href="video/2_1.mp4" />

3. 用JavaScript动态预加载（最可靠的兼容方案）

如果前两种方法都不满足需求，可以直接通过JS创建视频元素来实现预加载，这种方式在所有支持视频的浏览器里都稳定：

const preloadVideo = document.createElement('video');
preloadVideo.preload = 'auto';
preloadVideo.src = 'video/2_1.mp4';
// 不需要将元素添加到DOM树，浏览器会自动开始预加载资源

补充说明 #

兼容性工具的 data 有时候会基于规范草案或者实验室测试结果，和浏览器的实际实现存在偏差，Safari 11.x系列的preload特性确实存在不少这类“文档标记支持，但实际有bug”的情况，后续的Safari 12+版本才完善了媒体资源的预加载支持。

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