Al desarrollar proyectos front-end que incluyen funciones de audio y video, muchas veces necesitamos reproducir algunos archivos de audio y video a través de componentes web. Pero a diferencia de algunos reproductores universales, los navegadores no admiten muchos formatos de empaquetado y codificación de audio y vídeo. Por lo tanto, debemos verificar si el navegador admite el formato de codificación correspondiente antes de reproducir el video. A continuación se presenta una introducción sobre cómo verificar si el navegador actual admite un determinado formato de codificación a través de un script js.
Antes de presentar el método de inspección, primero introduzcamos los formatos de codificación comúnmente utilizados:
Formato de codificación H264
H.264 es un estándar de codificación de compresión de vídeo, también conocido como codificación de vídeo avanzada (AVC). H.264 Baseline, H264 Main y H.264 High son tres perfiles diferentes en codificación H.264.
El perfil H.264 Baseline está posicionado para una menor complejidad de codificación y menores requisitos de calidad de vídeo. Generalmente se usa para dispositivos de bajo rendimiento, redes de bajo ancho de banda o escenarios que requieren un alto consumo de energía del dispositivo. Proporciona una menor eficiencia y funcionalidad de codificación en comparación con otros perfiles.
El perfil principal H.264 proporciona una mejor eficiencia de compresión y una mayor calidad de vídeo y es adecuado para la mayoría de los escenarios de aplicaciones. Logra un equilibrio entre la eficiencia de la codificación y la calidad del video, lo que permite la codificación y decodificación de video de alta calidad en dispositivos con potencia informática moderada.
El perfil alto H.264 proporciona la mayor eficiencia de codificación y calidad de vídeo, y es adecuado para escenarios con requisitos de calidad de vídeo muy altos, como vídeo de alta definición y discos Blu-ray. Sin embargo, se requieren mayores recursos computacionales durante la codificación y decodificación.
El número de codificación correspondiente de H.264 Baseline es codecs="avc1.42E01E" El
número de codificación correspondiente de H.264 Main es codecs="avc1.4D401E" El
número de codificación correspondiente de H.264 High es codecs="avc1.64001E "
Codificación H265 (HEVC)
HEVC (Codificación de vídeo de alta eficiencia) es un estándar de codificación de compresión de vídeo, también conocido como H.265. HEVC Main y HEVC Main 10 son dos perfiles diferentes en codificación HEVC, que representan diferentes características y funciones de codificación.
El archivo de configuración principal HEVC es el archivo de configuración más básico en codificación HEVC y uno de los archivos de configuración más utilizados. Proporciona alta eficiencia de codificación y calidad de vídeo, y es adecuado para la mayoría de escenarios de aplicaciones. El perfil principal HEVC admite una profundidad de color de 8 bits (8 bits por muestra), lo que proporciona un buen rendimiento en la reproducción y transmisión de vídeo más común.
El perfil HEVC Main 10 proporciona compatibilidad con una mayor profundidad de color, es decir, 10 bits por muestra. En comparación con la profundidad de color de 8 bits del perfil HEVC Main, HEVC Main 10 puede proporcionar un rendimiento de color más delicado y realista, especialmente adecuado para escenas que requieren un mayor nivel de detalle de imagen, como alto rango dinámico (HDR) y color amplio. vídeo de gama.
El número de codificación correspondiente a hevc main es codecs="hev1.1.6.L93.B0"
El número de codificación correspondiente a hevc main 10 es codecs="hev1.2.4.L120.B0"
Para obtener otra información sobre el formato de codificación, consulte el siguiente enlace
https://cconcolato.github.io/media-mime-support/
Si solo queremos determinar si el navegador actual puede admitir un determinado formato de codificación, podemos crear una etiqueta de video y verificar si la codificación se puede reproducir a través de la interfaz canPlayType. Si devuelve tal vez o tal vez, significa que se puede reproducir. La implementación correspondiente es la siguiente:
//判断是否支持对应的编码格式
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;
}
Si queremos determinar más a fondo si el reproductor puede reproducir el video con parámetros específicos (resolución, velocidad de código, velocidad de cuadros, método de codificación), podemos verificar llamando a la interfaz navigator.mediaCapabilities.decodingInfo y verificar juzgando el valor de retorno correspondiente. Soporte del navegador. A continuación, he examinado formatos de vídeo comunes con ejemplos.
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);
Después de verificar los parámetros correspondientes del video y luego reproducirlo en el navegador, puede evitar el problema de falla de reproducción causado por la incompatibilidad del navegador.