When developing front-end projects that include audio and video functions, many times we need to play some audio and video files through web components. But unlike some universal players, many audio and video packaging formats and encoding formats are not supported by browsers. Therefore, we need to check whether the browser supports the corresponding encoding format before playing the video. Here is an introduction to how to check whether the current browser supports a certain encoding format through a js script.
Before introducing the inspection method, let us first introduce the commonly used encoding formats:
H264 encoding format
H.264 is a video compression coding standard, also known as Advanced Video Coding (AVC). H.264 Baseline, H264 Main and H.264 High are three different profiles in H.264 encoding.
The H.264 Baseline profile is positioned for lower encoding complexity and lower video quality requirements. It is usually used for low-performance devices, low-bandwidth networks, or scenarios that require high device power consumption. It provides lower coding efficiency and functionality compared to other profiles.
The H.264 Main profile provides better compression efficiency and higher video quality and is suitable for most application scenarios. It strikes a balance between encoding efficiency and video quality, enabling high-quality video encoding and decoding on devices with moderate computing power.
The H.264 High profile provides the highest encoding efficiency and video quality, and is suitable for scenarios with very high video quality requirements, such as high-definition video and Blu-ray discs. However, greater computational resources are required during encoding and decoding.
The corresponding encoding number of H.264 Baseline is codecs="avc1.42E01E" The
corresponding encoding number of H.264 Main is codecs="avc1.4D401E" The
corresponding encoding number of H.264 High is codecs="avc1.64001E"
H265 encoding (HEVC)
HEVC (High Efficiency Video Coding) is a video compression coding standard, also known as H.265. HEVC Main and HEVC Main 10 are two different profiles in HEVC encoding, representing different encoding features and functions.
The HEVC Main configuration file is the most basic configuration file in HEVC encoding and one of the most commonly used configuration files. It provides high encoding efficiency and video quality, and is suitable for most application scenarios. The HEVC Main profile supports 8-bit color depth (8 bits per sample), providing good performance in most common video playback and transmission.
The HEVC Main 10 profile provides higher color depth support, namely 10 bits per sample. Compared with the 8-bit color depth of the HEVC Main profile, HEVC Main 10 can provide more delicate and realistic color performance, especially suitable for scenes that require a higher level of image detail, such as high dynamic range (HDR) and wide color gamut video .
The corresponding encoding number for hevc main is codecs="hev1.1.6.L93.B0" The
corresponding encoding number for hevc main 10 is codecs="hev1.2.4.L120.B0"
For other encoding format information, please refer to the link below
https://cconcolato.github.io/media-mime-support/
If we just want to determine whether the current browser can support a certain encoding format, we can create a video tag and check whether the encoding can be played through the canPlayType interface. If it returns maybe or maybe, it means it can be played. The corresponding implementation is as follows:
//判断是否支持对应的编码格式
function isVideoDecodeHardwareAccelerated() {
// 检查是否支持 WebGPU
if (!navigator.gpu) {
return false;
}
const video = document.createElement('video');
// 尝试播放带有特定编解码器的视频
const canPlayTypeResult = video.canPlayType('video/mp4; codecs="avc1.42E01E"');
// 检查结果来判断是否支持
if (canPlayTypeResult === 'probably' || canPlayTypeResult === 'maybe') {
return true;
}
return false;
}
If we want to further determine whether the player can play the video with specific parameters (resolution, code rate, frame rate, encoding method), we can check by calling the navigator.mediaCapabilities.decodingInfo interface and check by judging the corresponding return value. Browser support. Below I've examined common video formats with examples.
async function getVideoAccelerationInformation() {
const formats = [
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.42E01E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 baseline
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.4D401E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 main
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.64001E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 high
{
type: 'webrtc', video: {
contentType: 'video/vp9', width: 1920, height: 1080, bitrate: 3000, framerate: 24 }}, // vp9 profile 0
//{ type: 'webrtc', video: { contentType: 'video/vp9.2', width: 1920, height: 1080, bitrate: 3000, framerate: 24 }}, // vp9 profile 2
{
type: 'file', video: {
contentType: 'video/mp4; codecs="hev1.1.6.L93.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // hevc main
{
type: 'file', video: {
contentType: 'video/mp4; codecs="hev1.2.4.L120.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }} // hevc main 10
];
const results = [];
for (const format of formats) {
//supported.supported 支持状态
//supported.smooth 平滑度
//supported.powerEfficient 功耗效率
const supported = await navigator.mediaCapabilities.decodingInfo(format);
results.push({
mimeType: format.video.contentType,
supported: supported.supported,
smooth: supported.smooth,
powerEfficient: supported.powerEfficient
});
}
return results;
}
//获取各种视频编码的加速信息
let result = getVideoAccelerationInformation();
console.log(result);
After checking the corresponding parameters of the video and then playing it in the browser, you can avoid the problem of playback failure caused by browser incompatibility.