关于html：<link rel = preload>必须具有有效的`as`值


<link rel=preload> must have a valid `as` value

我正在尝试使用link标签的预加载rel值来预加载视频，该值是根据mdn在预加载时的文档得出的。

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

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

在chrome中可以正常工作，并且可以预加载文件而不会出现问题。

当我在台式机或iphone上在safari 11.3中打开页面时，出现控制台错误消息：

must have a valid as value

根据文档的"可以预加载哪些类型的内容"一节，其中包含有效值列表，我肯定会使用正确的video类型。

我检查了链接标签上的mdn文档中有关移动Safari浏览器预加载的选项，并显示了"兼容性未知"问号。我还检查了caniuse，它似乎表明，只要我的移动浏览器版本为11.3，我就可以使用它。

手机和台式机均位于safari 11.3中，因此我不确定为什么会收到此错误。

任何想法/见识？

相关讨论

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

1
2
3
4
5
6
7
8
9
if (RuntimeEnabledFeatures::sharedFeatures().mediaPreloadingEnabled() && (equalLettersIgnoringASCIICase(as,"video") || equalLettersIgnoringASCIICase(as,"audio")))
    return CachedResource::MediaResource;
if (equalLettersIgnoringASCIICase(as,"font"))
    return CachedResource::FontResource;
#if ENABLE(VIDEO_TRACK)
if (equalLettersIgnoringASCIICase(as,"track"))
    return CachedResource::TextTrackResource;
#endif
return std::nullopt;

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

1
2
3
4
5
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#L239-L243

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

相关讨论

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

在浏览器网站上未找到任何官方帖子/错误，但我确实在Chrome存储库中找到了此信息：
https://github.com/chromium/chromium/blob/99314be8152e688bafbbf9a615536??bdbb289ea87/third_party/blink/web_tests/fast/dom/HTMLLinkElement/link-preload-unsupported-destination.html

1
2
3
4
5
6
<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"属性的链接时是否抛出警告