4

I'm trying to preload a video using the link tag's preload rel value. Documentation here. in my index.html file I'm adding the following to the head:

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

I get the following console error in the latest Chrome, even though video is a valid as value according to the spec.

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

I found this unresolved Chrome bug but that's referring to a different use case. Is it possible to preload video in this way?

Steven Musumeche
  • 2,886
  • 5
  • 33
  • 55
  • 2
    I've having the same exact issue when trying to preload video on mobile safari. I've tried to add 'crossorigin' and include the full domain as well with no luck. – justinavery Oct 25 '19 at 08:42

2 Answers2

0

You can test this in your browser using a snippet of code from here

function preloadFullVideoSupported() {
  const link = document.createElement('link');
  link.as = 'video';
  return (link.as === 'video');
}

or

function preloadFirstSegmentSupported() {
  const link = document.createElement('link');
  link.as = 'fetch';
  return (link.as === 'fetch');
}

Unfortunately, I can't find any documentation for support for individual as="X" values per browser when preloading.

Simon
  • 496
  • 4
  • 19
0

As of July 13, 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload has a note about 1/3rd of the way down that says "Note: video preloading is included in the Preload spec, but is not currently implemented by browsers." Perhaps that is why you see this warning (I see it too)? If so, then no, it is not possible to use preload this.

sandinmyjoints
  • 1,976
  • 1
  • 14
  • 20