20

When trying to rel="preload" a video file using a <link> tag in the <head> I get a warning in the Chrome console stating:

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

My tag is:

<link rel="preload" href="https://storage.googleapis.com/[myFilePath].mp4" as="video" type="video/mp4" media="(min-width: 768px)" crossorigin>

Tyler Hall
  • 363
  • 1
  • 2
  • 7
  • maybe duplicate of this https://stackoverflow.com/questions/50593084/link-rel-preload-must-have-a-valid-as-value might you got some help – Harshad Prajapati Aug 08 '19 at 18:09
  • That warning was said to be a bug a while ago, see here [https://github.com/ampproject/amphtml/issues/2492].I am just not sure if there was ever a permanent fix to it. Is this warning present when you use mozilla as well? – Nompumelelo Aug 08 '19 at 19:13
  • @Lelo I don't get the warning using Firefox. It doesn't seem to preload the video, though. – Tyler Hall Aug 08 '19 at 20:20

2 Answers2

2

Maybe this warning is a bug

[as]- this attribute is used when rel="preload" or rel="prefetch" has been set on the element. It specifies the type of content being loaded/prefetched Instead, 'preload' you can also use 'prefetch'

<link rel="prefetch" href="./img/intro.mp4" as="video">

So You can accomplish your task

Dpk
  • 567
  • 5
  • 16
2

Hopefully this answer will get outdated soon, but when I look at the official docs, (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), I find that "preload" has questionable support for both Chrome and Safari. The warning we are all seeing is likely due to the fact that Chrome/Safari is recognizing the "preload" tag but is not recognizing "audio" (or whatever you are using) as a valid value for the "as" tag.

Regarding the answer saying to replace "preload" with "prefetch", do not do this. In fact, as a general rule, I would never in any situation assume that two differntly-named tags/variables/anythings are the same. "Prefetch" will load a resource in preparation for a navigation, while "preload" will load a resource on the currently navigated page before anything is rendered. More info one preload here: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

John Miller
  • 388
  • 2
  • 8
  • 23