Ao desenvolver projetos front-end que incluem funções de áudio e vídeo, muitas vezes precisamos reproduzir alguns arquivos de áudio e vídeo através de componentes web. Mas, ao contrário de alguns reprodutores universais, muitos formatos de empacotamento e codificação de áudio e vídeo não são suportados pelos navegadores. Portanto, precisamos verificar se o navegador suporta o formato de codificação correspondente antes de reproduzir o vídeo. Aqui está uma introdução sobre como verificar se o navegador atual suporta um determinado formato de codificação por meio de um script js.
Antes de apresentar o método de inspeção, vamos primeiro apresentar os formatos de codificação comumente usados:
Formato de codificação H264
H.264 é um padrão de codificação de compressão de vídeo, também conhecido como Advanced Video Coding (AVC). H.264 Baseline, H264 Main e H.264 High são três perfis diferentes na codificação H.264.
O perfil H.264 Baseline está posicionado para menor complexidade de codificação e menores requisitos de qualidade de vídeo. Geralmente é usado para dispositivos de baixo desempenho, redes de baixa largura de banda ou cenários que exigem alto consumo de energia do dispositivo. Ele fornece menor eficiência e funcionalidade de codificação em comparação com outros perfis.
O perfil principal H.264 oferece melhor eficiência de compactação e maior qualidade de vídeo e é adequado para a maioria dos cenários de aplicação. Ele atinge um equilíbrio entre eficiência de codificação e qualidade de vídeo, permitindo codificação e decodificação de vídeo de alta qualidade em dispositivos com poder de computação moderado.
O perfil H.264 High oferece a mais alta eficiência de codificação e qualidade de vídeo e é adequado para cenários com requisitos de qualidade de vídeo muito altos, como vídeo de alta definição e discos Blu-ray. No entanto, maiores recursos computacionais são necessários durante a codificação e decodificação.
O número de codificação correspondente do H.264 Baseline é codecs="avc1.42E01E" O
número de codificação correspondente do H.264 Main é codecs="avc1.4D401E" O
número de codificação correspondente do H.264 High é codecs="avc1.64001E "
Codificação H265 (HEVC)
HEVC (High Efficiency Video Coding) é um padrão de codificação de compressão de vídeo, também conhecido como H.265. HEVC Main e HEVC Main 10 são dois perfis diferentes na codificação HEVC, representando diferentes recursos e funções de codificação.
O arquivo de configuração principal HEVC é o arquivo de configuração mais básico na codificação HEVC e um dos arquivos de configuração mais comumente usados. Ele fornece alta eficiência de codificação e qualidade de vídeo e é adequado para a maioria dos cenários de aplicação. O perfil principal HEVC suporta profundidade de cor de 8 bits (8 bits por amostra), proporcionando bom desempenho na reprodução e transmissão de vídeo mais comuns.
O perfil HEVC Main 10 oferece suporte a maior profundidade de cor, ou seja, 10 bits por amostra. Comparado com a profundidade de cor de 8 bits do perfil HEVC Main, o HEVC Main 10 pode fornecer desempenho de cores mais delicado e realista, especialmente adequado para cenas que exigem um nível mais alto de detalhes de imagem, como alta faixa dinâmica (HDR) e ampla cor vídeo de gama.
O número de codificação correspondente para hevc main é codecs="hev1.1.6.L93.B0" O
número de codificação correspondente para hevc main 10 é codecs="hev1.2.4.L120.B0"
Para outras informações sobre formato de codificação, consulte o link abaixo
https://cconcolato.github.io/media-mime-support/
Se quisermos apenas determinar se o navegador atual pode suportar um determinado formato de codificação, podemos criar uma tag de vídeo e verificar se a codificação pode ser reproduzida através da interface canPlayType. Se retornar talvez ou talvez, significa que pode ser reproduzido. A implementação correspondente é a seguinte:
//判断是否支持对应的编码格式
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;
}
Se quisermos determinar se o player pode reproduzir o vídeo com parâmetros específicos (resolução, taxa de código, taxa de quadros, método de codificação), podemos verificar chamando a interface navigator.mediaCapabilities.decodingInfo e verificar julgando o valor de retorno correspondente. Suporte ao navegador. Abaixo, examinei formatos de vídeo comuns com exemplos.
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);
Após verificar os parâmetros correspondentes do vídeo e reproduzi-lo no navegador, você pode evitar o problema de falha na reprodução causada por incompatibilidade do navegador.