HTML5视频,没有音轨时怎么检测?

k2arahey  于 2023-02-02  发布在  HTML5
关注(0)|答案(4)|浏览(283)

我正在制作一个chrome应用程序,我希望有视频播放的自定义控件,但是我在静音按钮上遇到了一些困难。大多数在应用程序中播放的视频都是静音的,所以我希望能够在没有音轨的时候禁用静音按钮,就像chrome使用默认控件一样。
尝试使用音量值,但即使没有音轨,它也返回"1"。检查视频是否静音也不起作用。
这是一个snippet
有什么建议吗?

wfsdck30

wfsdck301#

基于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");
}
rdlzhqv9

rdlzhqv92#

在某个时候,浏览器可能会开始使用audioTracks property,现在,你可以使用webkitAudioDecodedByteCount作为webkit,mozHasAudio作为firefox。

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");
});
3okqufwl

3okqufwl3#

由于某种原因,@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
1qczuiv0

1qczuiv04#

有不同的方法来检查视频文件是否有音频,其中之一是使用视频的mozHasAudiovideo.webkitAudioDecodedByteCountvideo.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.");
    }            
};

相关问题