我正在制作一个 chrome 应用程序，我想为视频播放提供自定义控件，但我在使用静音按钮时遇到了一些困难。将在应用程序中播放的大多数视频都是静音的，因此我希望能够在没有音轨时禁用该按钮，就像 chrome 使用默认控件一样。
尝试使用音量值，但即使没有音轨，它也会返回“1”。检查视频是否静音也不起作用。
这是一个片段。
有什么建议？
HTML5 视频，如何检测没有音轨的情况？
IT技术
javascript
html
2021-02-24 08:02:58
3个回答
基于upuoth的答案的更短的功能并扩展到支持IE10+
function hasAudio (video) {
return video.mozHasAudio ||
Boolean(video.webkitAudioDecodedByteCount) ||
Boolean(video.audioTracks && video.audioTracks.length);
}
用法：
var video = document.querySelector('video');
if(hasAudio(video)) {
console.log("video has audio");
} else{
console.log("video doesn't have audio");
}
在某些时候，浏览器可能会开始实现audioTracks 属性。现在，您可以使用webkitAudioDecodedByteCountwebkit 和mozHasAudiofirefox。
document.getElementById("video").addEventListener("loadeddata", function() {
if (typeof this.webkitAudioDecodedByteCount !== "undefined") {
// non-zero if video has audio track
if (this.webkitAudioDecodedByteCount > 0)
console.log("video has audio");
else
console.log("video doesn't have audio");
}
else if (typeof this.mozHasAudio !== "undefined") {
// true if video has audio track
if (this.mozHasAudio)
console.log("video has audio");
else
console.log("video doesn't have audio");
}
else
console.log("can't tell if video has audio");
});
出于某种原因，@fregante 的hasAudio函数在某个时候停止在 Chrome 中工作 - 即使在等待“loadeddata”和“loadedmetadata”事件，甚至“canplaythrough”事件之后。它可能与我使用的视频格式（webm）有关。无论如何，我通过短时间播放视频来解决它：
// after waiting for the "canplaythrough" event:
hasAudio(video); // false
video.play();
await new Promise(r => setTimeout(r, 1000));
video.pause();
hasAudio(video); // true