JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

JavaScript

const mediaConfig = {
  /**
   * You can use `file` or `media-source` and the result are same here,
   * don't use `webrtc` since HEVC webrtc is not supported currently.
   */
  type: 'file',
  video: {
    /**
     * HEVC Profile
     * 
     * Main: `hev1.1.6.L93.B0`
     * Main 10: `hev1.2.4.L93.B0`
     * Main still-picture: `hvc1.3.E.L93.B0`
     * Range extensions: `hvc1.4.10.L93.B0`
     */
    contentType : 'video/mp4;codecs="hev1.1.6.L120.90"',
    /* Width */
    width: 1920,
    /* Height */
    height: 1080,
    /* Any number */
    bitrate: 10000, 
    /* Any number */
    framerate: 30
  }
}

navigator.mediaCapabilities.decodingInfo(mediaConfig)
  .then(result => {
     /* Indicate whether or not the video with given profile, width, and height can played well on the browser */
    if (result.supported) {
      console.log('Video can play!');
      alert('Video can play!');
    } else {
      console.log('Video can\'t play!');
			alert('Video can\'t play!');
    }
  });
  
  
if (MediaSource.isTypeSupported('video/mp4;codecs="hev1.1.6.L120.90"')) {
  console.log('HEVC main profile is supported!');
}

if (MediaSource.isTypeSupported('video/mp4;codecs="hev1.2.4.L120.90"')) {
  console.log('HEVC main 10 profile is supported!');
}

if (MediaSource.isTypeSupported('video/mp4;codecs="hev1.3.E.L120.90"')) {
  console.log('HEVC main still-picture profile is supported!');
}

if (MediaSource.isTypeSupported('video/mp4;codecs="hev1.4.10.L120.90"')) {
  console.log('HEVC range extensions profile is supported!');
}