<link rel =“preload”/>必须具有有效的`as`值

Question

我尝试使用link代码预加载每个mdn's documentation on preload的预加载值来预加载视频。

在我的index.html文件中我将以下内容添加到头部：

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

在Chrome中，这样可以正常工作并且可以毫无问题地预加载文件。

当我在桌面或iphone上的safari 11.3中打开页面时，我收到控制台错误消息：

  

必须具有有效的as值

根据包含有效值列表的文档的"what types of content can be preloaded"部分，我确实使用了正确的video类型。

我在链接标记上检查了mdn documentation移动版Safari预载选项，它显示了＆＃34;兼容性未知＆＃34;问号。我还检查了caniuse，它似乎表明，只要我的手机游戏版本是11.3我应该能够使用它。

手机和我的桌面都在11.3的旅行中，所以我不确定为什么我会收到此错误。

任何想法/见解??

Answer 1

似乎webkit禁用了视频和音频文件的预加载。

auto type = LinkLoader::resourceTypeFromAsAttribute(as);
if (!type) {
    document.addConsoleMessage(MessageSource::Other, MessageLevel::Error, String("<link rel=preload> must have a valid `as` value"));
    return nullptr;
}

https://github.com/WebKit/webkit/blob/master/Source/WebCore/loader/LinkLoader.cpp#L125

{{1}}

https://github.com/WebKit/webkit/blob/master/Source/WebCore/loader/LinkLoader.cpp#L239-L243

我不确定我们是否可以通过更改某些配置在Safari上启用mediaPreloadingEnabled。

Answer 2

as="video|audio|document" 在 Chrome 上不受支持。

在浏览器网站上没有发现任何官方帖子/错误，但我确实在 Chrome 存储库中找到了这个： https://github.com/chromium/chromium/blob/99314be8152e688bafbbf9a615536bdbb289ea87/third_party/blink/web_tests/fast/dom/HTMLLinkElement/link-preload-unsupported-destination.html

<块引用>

<link rel=preload href="resources/empty.html">
<link rel=preload href="resources/empty.html" as="document">
<link rel=preload href="../../../media/content/test.mp4" as="audio">
<link rel=preload href="../../../media/content/test.wav" as="video">
<!--This test verifies that specific warnings are shown when preload
   resources use unsupported (but valid) destinations. -->

基本上这是一个测试，用于验证 Chrome 在使用那些不受支持的“as”属性时是否会发出警告