Safari не останавливает загрузку мультимедиа после удаления src и вызова load () - PullRequest
Новая
       15

Safari не останавливает загрузку мультимедиа после удаления src и вызова load ()

0 голосов
/ 28 февраля 2019

После приостановки медиа-элемента HTML браузер продолжает загружать медиа.

MDN описывает, как можно остановить загрузку, удалив атрибут src медиа-элемента и вызвав HTMLMediaElement.load(): MDN - остановка загрузки мультимедиа .

В Safari этого недостаточно для остановки загрузки мультимедиа.На вкладке Сеть веб-инспектора видно, что передача продолжается.Это несмотря на то, что метод 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 и остановить загрузку, инициированную медиа-элементом?

Мой вариант использования включает аудиопоток.Я не хочу, чтобы браузер продолжал буферизацию после того, как пользователь остановил воспроизведение.

1 Ответ

0 голосов
/ 10 июля 2019

У меня возникла та же проблема.
Единственный хороший обходной путь, который я нашел, - это поместить аудио-тег в отдельный html и загрузить его в iframe, а затем добавить прослушиватель событий, который перезагружает страницу аудио-тега, когда потокпаузы.

...