JS властивість Event.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) {
  // код обробки події
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

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

video.addEventListener('suspend', function() {
  console.log('Призупинено завантаження. Оптимізація буфера...');
  setTimeout(() => {
    if (video.buffered.length > 0) {
      const endOfBuffer = video.buffered.end(0);
      video.currentTime = endOfBuffer; // Перемотуємо до кінця завантаженого контенту
      video.play();
      console.log('Відео продовжує відтворення з останньої буферизованої частини.');
    }
  }, 2000);
});

<div id="statusMessage">Демонстраційний елемент</div>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const video = document.querySelector('video');
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';
});