javascript - 如何强制 HTML <video> 跳过不能显示为 video 的源?

我有一个使用 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,或者如果您不想加载此库相当大量的代码,您可以等待源加载并检查 videoWidthvideoHeight 是否为零:

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。

相似文章

twilio - DevTools 无法加载源 map

我知道Chrome开发工具中有很多关于这些警告的帖子。对于所有这些,解决方案是关闭通知“启用javascript源maps”和“启用CSS源maps”。我想知道的是如何解决这个问题,以及导致这些警告的...

最新文章