Tengo un video MP4 codificado con un códec que aparentemente Chrome no admite, porque cuando abro el video en mi navegador, aparece solo como audio.
Decidí dar cuenta de videos como este en mi aplicación generando una versión H.264 de baja resolución para usar cuando el códec principal no es compatible con el navegador. Tengo mi elemento <video> configurado así:
<video> HTML video not supported <source src="original.mp4" type="video/mp4"> <source src="display.mp4" type="video/mp4"> </video> Sin embargo, Chrome no ignora el primer video a pesar de no admitir el códec; continúa mostrando todo el <video> solo como audio.
¿Hay alguna manera de obligar a los navegadores a omitir <source> s que no se pueden mostrar como video?
Si no hay una forma integrada, ¿cómo puedo usar JS para lograr lo mismo? No quiero simplemente poner display.mp4 primero porque tiene una resolución más baja, lo que no sería óptimo en los casos en que el navegador realmente puede mostrar el original. ¿Incluir la porción de codecs del tipo de contenido solucionaría este problema?
Si conoce los códecs, puede llamar a video.canPlayType() :
const supported = !!document.createElement("video") .canPlayType('video/mp4; codecs="mp4v"'); console.log({ supported });Si no conoce ese códec y tiene archivos fijos, puede consultar este sitio web: https://nickdesaulniers.github.io/mp4info/
Si no tiene archivos fijos, puede recuperar los códecs con esta biblioteca: https://github.com/gpac/mp4box.js , o si no desea cargar esta gran cantidad de código, puede espere a que se cargue la fuente y verifique que videoWidth y videoHeight sean cero:
const video = document.querySelector("video"); video.play().then(() => { if(video.videoWidth + video.videoHeight === 0) { unsupported("video"); } }).catch(unsupported); function unsupported(err) { console.error("unsupported", err); } <video src="https://dl.dropboxusercontent.com/s/dj8g1oqu29zv8eh/mp4v.mp4" controls muted></video>No estoy seguro de que HTMLVideoElement.getVideoPlaybackQuality() ayude a juzgar si la fuente tiene imágenes o no, pruébalo.
const isVideoSupport = yourVideoElement.getVideoPlaybackQuality().totalVideoFrames > 0;Además, si ya sabe qué navegador no puede reproducir el video 'de origen', puede omitir el video verificando si el navegador actual es Chrome/Firefox/etc.