Microsoft Edge false support of AV1 on canPlayType

user_10924369 0
Viewed 814

Microsoft Edge 85 has a false positive indication of an AV1 video codec support.

Checking like this returns "probably" which usually indicates that video codec is safe to use.

videoElement.canPlayType('video/webm; codecs="av01.0.05M.08"')

Putting AV1 source element causes Edge to pick AV1 over other codecs and fail to play it.

<video playsinline loop autoplay muted>
    <source type="video/webm; codecs='av01.0.05M.08'" src="av1.webm">
    <source type="video/webm; codecs='vp9'" src="vp9.webm">
    <source type="video/mp4; codecs='avc1.64001f'" src="avc.mp4">
</video>

Is there any other way to detect codec support more effectively with no false positives as mentioned above?

microsoft-edge html5-video chromium html javascript
1 Answers

I followed the advice from @Deepak-MSFT and use JS to replace the video source on Edge.

I've confirmed that this works in Edge 103 on Window 10 21H2. The browser will still make a request for the unplayable AV1 WebM file, but will then switch over and play the AVC MP4 file.

// Target Edge on Windows with UserAgent and Platform strings
if (
  window.navigator.userAgent.toLowerCase().includes("edg") &&
  window.navigator.platform === "Win32"
) {
  // Select the video element
  const video = document.querySelector("video");
  
  // Select the playable source file and set video src
  video.src = video
    .querySelector("source[type='video/mp4']")
    .getAttribute("src");
}

This assumes that you have only one source element with type="video/mp4". The query selector could be more specific, e.g. select for codecs attribute, to target a very specific source. Another option is to add id attributes to your source elements and target the desired source that way.

user_7967970
Related