如何仅在不兼容的浏览器中播放 MP4 HEVC (h265) 视频文件时检测音频？

问题描述

我使用的是原生 <video> 标签，我发现许多浏览器无法使用 hevc/h265 编解码器播放 mp4 视频：

https://caniuse.com/hevc

目前，作为默认行为，不兼容的浏览器（主要是 chrome 和 firefox）只播放带有音频的视频，就像一切正常一样......我想正确地告诉用户他们的浏览器无法播放这个特定的视频。

您是否知道是否有一种方法可以检测前端是否未正确播放视频（仅音频）以提醒最终用户？

ps：将视频重新编码为另一种格式不是那里问的问题:)

解决方法

在尝试使用 mux.js 库分析第一个字节的一些调查之后，我从 github 那里得到了这个不错的 hack：

const video = document.querySelector('video');

video.addEventListener('loadedmetadata',(event) => {
  if(event.target.videoHeight === 0) {
    console.log('cant play video..');
  }
});

想法是在视频初始化后检查 videoHeight 属性值：

• 如果我们有一个“真实”的值，就意味着浏览器可以读取它。
• 如果我们有 0，浏览器将无法读取它。