Search code examples
videobrowsermp4hevc

How detect if audio only when playing MP4 HEVC (h265) video files in incompatible browsers?


I'm using a native <video> tag and I've seen that many browsers can't play mp4 videos using hevc/h265 codec:

https://caniuse.com/hevc

Currently, as default behavior, uncompatibles browsers (chrome & firefox mainly) just play video with audio only like if everything was ok.. I would like to properly tell users their browser can't play this specific video.

Do you know if there's a way to detect if video is not played correctly (audio only) on frontend side to alert end users?

ps: Reencoding videos to another format is not the question asked there :)


Solution

  • After some investigation trying to analyse first bytes with mux.js lib, I got this nice hack from github:

    const video = document.querySelector('video');
    
    video.addEventListener('loadedmetadata', (event) => {
      if(event.target.videoHeight === 0) {
        console.log('cant play video..');
      }
    });
    

    The idea is to check the videoHeight property value after video initialization:

    • If we have a 'real' value, it means browser is able to read it.
    • If we have 0, browser can't read it.