我正在制作一个Chrome应用程序,希望为视频播放添加自定义控件,但在静音按钮方面遇到了一些困难。应用程序中播放的大多数视频都是无声的,因此我希望能够像Chrome默认控件一样在没有音轨时禁用该按钮。尝试使用音量值,但即使没有音轨也返回“1”。检查视频是否已静音也不起作用。这里是片段。有什么建议吗?
基于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");
}
addEventListener("loadeddata")
。 - MortezahasAudio(video)
,包括 loadeddata
和 loadedmetadata
两个事件。在我的情况下,loadedmetadata
记录为 false
,而 loadeddata
记录为 true
。 - Joseph Webber在某些时候,浏览器可能会开始实现audioTracks属性。目前,您可以在webkit中使用webkitAudioDecodedByteCount
,在Firefox中使用mozHasAudio
。
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
检查视频文件是否有音频的方法有很多种,其中之一是使用视频的 mozHasAudio
、video.webkitAudioDecodedByteCount
和 video.audioTracks?.length
属性,简单明了...
const video = component.node.querySelector("video");
video.onloadeddata = function() {
if ((typeof video.mozHasAudio !== "undefined" && video.mozHasAudio) ||
(typeof video.webkitAudioDecodedByteCount !== "undefined" && video.webkitAudioDecodedByteCount > 0) ||
Boolean(video.audioTracks?.length)) {
console.log("This video has audio tracks.");
} else {
console.log("This video has no audio tracks.");
}
};