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

Question

I'm trying to preload a video using the link tag's preload rel value per mdn's documentation on preload.

in my index.html file I'm adding the following to the head:

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

In chrome this works fine and preloads the file without issue.

When I open the page in safari 11.3 either on my desktop or on an iphone I get a console error message:

must have a valid as value

According to the "what types of content can be preloaded" section of the documentation that contains the list of valid values I'm definitely using the correct video type.

I checked both the mdn documentation for mobile safari preload option on the link tag and it shows a "compatibility unknown" question mark. I also checkedcaniuse and it seems to indicate that as long as my mobile safari version is at 11.3 I should be able to use it.

The phone and my desktop are both at safari 11.3, so I'm not sure why I'm getting this error.

Any ideas/insight??

Answer 1

it seems webkit disable preload for video and audio file.

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

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

I'm not sure if we can enable mediaPreloadingEnabled on safari by changing some configuration.

Answer 2

as="video|audio|document" isn't supported on Chrome.

Didn't found any official post/bug on the browsers sites, but I did found this on chromium repository: 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. -->

Basically it's a test that verify that Chrome throws a warning when using those link unsupported 'as' attributes