Подія suspend — браузер призупинив завантаження медіа

Загальний опис

Подія suspend виникає, коли браузер тимчасово зупиняє завантаження медіафайлу (відео або аудіо), зазвичай для оптимізації використання ресурсів. Це може статися, якщо браузер вважає, що подальше завантаження не потрібне, або мережеві умови не дозволяють завершити завантаження. Подія корисна для відстеження стану завантаження медіафайлів і управління ресурсами в додатку.

Коли браузер вирішує припинити завантаження, наприклад, через те, що користувач не перегортає відео до подальших фрагментів, подія suspend сигналізує про призупинення завантаження. Це дозволяє розробникам реагувати на таку поведінку, наприклад, показувати повідомлення про те, що завантаження тимчасово призупинено, або виконувати додаткові дії, пов'язані із керуванням буфером.

Приклад використання:

const video = document.querySelector('video');

video.addEventListener('suspend', function() {
  console.log('Завантаження відео призупинено для збереження ресурсів.');
});

Цей код демонструє простий спосіб відстеження події suspend. Коли браузер зупиняє завантаження відео, виводиться повідомлення в консоль. Це корисно для діагностики проблем або оптимізації поведінки медіаконтенту в додатку.

Подія suspend спрацьовує не лише через мережеві проблеми, але й коли браузер вирішує, що подальше завантаження медіафайлу не потрібне негайно. Для контролю над завантаженням медіаконтенту, включаючи управління буфером або динамічне завантаження, подія suspend може бути корисною в додатках з відео- або аудіоконтентом.

правити

Порада

Подія може бути корисною для застосунків з великими обсягами медіаконтенту, де важливо зберігати ресурсні обмеження. Це дозволяє вам керувати поведінкою завантаження та завантажувати лише ті частини відео, які справді необхідні для поточного перегляду.

автор: Bond правити

Порада

Не плутайте подію suspend з stalled. suspend спрацьовує, коли браузер навмисно зупиняє завантаження, а stalled сигналізує про проблеми з мережею або неможливість продовжити завантаження.

автор: Bond правити

Порада

Використовуйте подію suspend разом із іншими подіями медіафайлів, такими як progress, щоб краще відслідковувати стан завантаження і вирішувати, коли необхідно завантажувати додаткові дані.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('suspend', function(event) {
  // код обробки події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	3	3.5	3.1	10.5	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="statusMessage">Завантаження ще не починалося</div>
<video id="clip" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

const video = document.getElementById('clip');
const status = document.getElementById('statusMessage');

video.addEventListener('suspend', function() {
  status.textContent = 'Завантаження медіа призупинено для збереження ресурсів.';
  status.style.color = 'orange';
});

video.addEventListener('progress', function() {
  status.textContent = 'Завантаження медіа триває.';
  status.style.color = 'green';
});

video.src = silentWav(20);

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}

<video id="clip" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

const video = document.getElementById('clip');

video.addEventListener('suspend', function() {
  console.log('Призупинено завантаження. Оптимізація буфера...');
  setTimeout(() => {
    if (video.buffered.length > 0) {
      const endOfBuffer = video.buffered.end(0);
      console.log(`Буфер доходить до ${endOfBuffer.toFixed(2)} с`);
      video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
    }
  }, 2000);
}, { once: true });

video.src = silentWav(20);

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}