我有一个使用 Chrome 似乎不支持的编解码器编码的 MP4 video，因为当我在浏览器中打开 video 时，它仅显示为音频。
我决定在我的应用程序中像这样考虑 videos ，方法是生成一个低分辨率 H.264 版本，以便在浏览器不支持主编解码器时使用。我的 <video> 元素设置如下：
<video>
HTML video not supported
<source src="original.mp4" type="video/mp4">
<source src="display.mp4" type="video/mp4">
</video>然而，尽管不支持编解码器，Chrome 并没有忽略第一个 video ；它继续将整个 <video> 仅显示为音频。
有没有办法强制浏览器跳过无法显示为 video 的 <source>？
如果没有内置的方式，我如何使用 JS 来完成同样的事情？我不想简单地把 display.mp4 放在第一位，因为它的分辨率较低，这在浏览器可以实际显示原件的情况下不是最佳选择。包含内容类型的 codecs 部分会解决此问题吗？
回答1
如果您知道编解码器，则可以调用 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaytype：
const supported = !!document.createElement("video")
.canPlayType('video/mp4; codecs="mp4v"');
console.log({ supported });如果你不知道那个编解码器并且有固定的文件，你可以查看这个网站：https://nickdesaulniers.github.io/mp4info/
如果您没有固定文件，您可以使用以下库检索编解码器：https://github.com/gpac/mp4box.js，或者如果您不想加载此库相当大量的代码，您可以等待源加载并检查 videoWidth 和 videoHeight 是否为零：
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>回答2
我不确定 https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/getVideoPlaybackQuality 是否有助于判断来源是否有图像，试一试。
const isVideoSupport = yourVideoElement.getVideoPlaybackQuality().totalVideoFrames > 0;另外，如果你已经知道哪个浏览器不能播放'origin' video，你可以通过检查当前浏览器是否是chrome/firefox/etc来跳过video。