Question

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

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

在Safari中，这不足以阻止媒体继续下载。在“ Web Inspector网络”选项卡中，可以看到传输继续。尽管支持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中的此问题并停止由media元素启动的下载？

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

Answer 1

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

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

1 个答案: