删除 src 并调用 load() 后，Safari 不会停止下载媒体

Question

HTML 媒体元素暂停后，浏览器会继续下载媒体。

MDN 描述了如何通过删除媒体元素的src属性并调用HTMLMediaElement.load()：MDN - 停止媒体下载来停止下载。

在 Safari 中，这不足以阻止媒体继续下载。在Web Inspector Network选项卡中，可以看到传输仍在继续。尽管该load()方法受到支持并且在调用该方法时发送了适当的事件，但情况仍然如此。（请参阅MDN。）

例如，使用以下示例并监视网络，您应该能够看到 Safari 中的行为与 Chrome 中的行为有所不同。

<audio
   controls preload="none" type="audio/mpeg"
   src="http://bbcmedia.ic.llnwd.net/stream/bbcmedia_radio1_mf_p"
/>

<script>
    const mediaEl = document.querySelector('audio');

    mediaEl.addEventListener('abort', (e) => {
        console.log('abort', e.target);
    });
    mediaEl.addEventListener('emptied', (e) => {
        console.log('emptied', e.target);
    });
    mediaEl.addEventListener('pause', (e) => {
        e.target.removeAttribute('src');
        e.target.load();
    });
</script>

从 DOM 中删除媒体元素也不足以停止下载。

mediaEl.addEventListener('pause', (e) => {
    e.target.parentNode.removeChild(e.target);
});

有没有办法在 Safari 中解决此问题并停止媒体元素启动的下载？

我的用例涉及音频流。我不希望浏览器在用户停止播放后继续缓冲。

Answer 1

我遇到过同样的问题。
我发现的唯一好的解决方法是将音频标签放在单独的 html 中并将其加载到 iframe 中 - 然后添加一个事件侦听器，在流暂停时重新加载音频标签的页面。