online demo

Check Browser Media MIME Support

https://cconcolato.github.io/media-mime-support/

Chrome 所支持的 Audio/Video 格式

https://www.chromium.org/audio-video/#codec-and-container-support

Support built-in HLS

Based on flv.js.

1
2
3
4
5
6
7
function supportNativeMediaPlayback(mimeType: string) {
    const videoElement = window.document.createElement('video');
    let canPlay = videoElement.canPlayType(mimeType);
    return canPlay === 'probably' || canPlay == 'maybe';
}

console.log('Support built-in HLS:', supportNativeMediaPlayback('application/vnd.apple.mpegurl'));

Support MSE H264

Based on hls.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// check MediaSource support
function getMediaSource(): typeof MediaSource | undefined {
  return self.MediaSource || ((self as any).WebKitMediaSource as MediaSource);
}

// check SourceBuffer support
function getSourceBuffer(): typeof self.SourceBuffer {
  return self.SourceBuffer || (self as any).WebKitSourceBuffer;
}

function isSupported(): boolean {
  const mediaSource = getMediaSource();
  if (!mediaSource) {
    return false;
  }
  const sourceBuffer = getSourceBuffer();
  // Check H264 support
  const isTypeSupported =
    mediaSource &&
    typeof mediaSource.isTypeSupported === 'function' &&
    mediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');

  // if SourceBuffer is exposed ensure its API is valid
  // safari and old version of Chrome doe not expose SourceBuffer globally so checking SourceBuffer.prototype is impossible
  const sourceBufferValidAPI =
    !sourceBuffer ||
    (sourceBuffer.prototype &&
      typeof sourceBuffer.prototype.appendBuffer === 'function' &&
      typeof sourceBuffer.prototype.remove === 'function');
  return !!isTypeSupported && !!sourceBufferValidAPI;
}

console.log('Support MediaSource:', !!getMediaSource());
console.log('Support SourceBuffer:', !!getSourceBuffer());
console.log('Support MSE & H264:', !!isSupported());