web-dev-qa-db-ja.com

<link rel = preload>には有効な `as`値が必要です

linkタグのプリロードrel値 mdnのプリロードに関するドキュメント を使用してビデオをプリロードしようとしています。

私のindex.htmlファイルで、私は頭に以下を追加しています：

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

chromeでは、これは正常に機能し、問題なくファイルをプリロードします。

デスクトップまたはiPhoneのいずれかでSafari 11.3のページを開くと、コンソールエラーメッセージが表示されます。

有効なas値が必要です

有効な値のリストを含むドキュメントの "どのタイプのコンテンツをプリロードできる" セクションによれば、正しいvideoタイプを使用していることは間違いありません。

リンクタグのモバイルサファリプリロードオプションの mdn documentation の両方をチェックしたところ、「互換性不明」の疑問符が表示されています。また、 caniuse も確認しましたが、モバイルサファリのバージョンが11.3である限り、使用できるはずです。

電話とデスクトップはどちらもsafari 11.3なので、なぜこのエラーが発生するのかわかりません。

任意のアイデア/洞察??

htmlpreload
11
Chris Schmitz

webkitがビデオとオーディオファイルのプリロードを無効にしているようです。

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-L24

いくつかの構成を変更することで、safariでmediaPreloadingEnabledを有効にできるかどうかはわかりません。

6
jun