javascript - 检测 `pause` 事件是否由用户交互或缓冲区欠载触发？

Question

当通过 <audio> 播放实时音频流时，例如网络广播或 Audio() ，暂停事件可以(至少)三种方式触发:

1. 用户点击暂停按钮(使用 <audio controls> )
2. 用户点击浏览器的全局音频控件
   • iOS:Control Center
   • Android:浏览器的通知抽屉(至少是 Chrome、Opera、Firefox)
   • 桌面:Media Session API控件，但未初始化，没有显式 setActionHandler (目前可能隐藏在旗帜后面)
3. 各种网络条件导致的缓冲区不足

是否可以区分1/2和3？

• 理想情况下，应该有一个类似 isTrusted 的事件属性，我错过了
• 我试着猜测，尤其是看着。在 readyState 和 networkState , 但两者都非常不确定，尤其是跨浏览器(例如 HAVE_FUTURE_DATA 与 HAVE_ENOUGH_DATA 的解释/语义)
• 我回避制作一个“衰退状态机”，同时兼顾其他事件。缓冲区欠载通常前面有stalled事件，有时 后跟 ended事件。跨浏览器的实现似乎非常复杂，而且误报的危险非常高。

在媒体 session 之前我运气不好吗 lands无处不在？

备注:this question看起来像是一个解决方案，但不幸的是不是——浏览器以不同且不一致的方式处理直播流的“结束”。

Answer 1

waiting事件应符合您的需求。

您可以在使用 Chrome 网络选项卡中的下拉菜单模拟不良网络时尝试此演示(例如:慢速 3G)

const video = document.getElementById('mwe_player_0');
video.onwaiting = function() { console.log('onwaiting'); };

<video id="mwe_player_0" controls="" preload="none" style="width:800px;height:450px"><source src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;"></video>

请注意，此演示也适用于 HTMLAudioElement(因为它继承了 HTMLMediaElement)。视频演示更易于测试。