JS властивість Event.canplaythrough

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

canplaythrough — це подія HTML, яка спрацьовує, коли браузер вважає, що медіафайл, наприклад, аудіо або відео, можна відтворити повністю до кінця без необхідності зупинок для додаткової буферизації. На відміну від події canplay, яка означає, що відтворення можна почати, але можуть бути переривання для завантаження, подія canplaythrough гарантує, що файл завантажено достатньо для безперервного відтворення.

Ця подія особливо корисна в ситуаціях, коли ви хочете забезпечити плавне відтворення медіафайлів для користувачів, не дозволяючи починати відтворення, поки весь файл або його значна частина не буде готова. Наприклад, у випадку з великими відеофайлами або потоковим відео, ви можете використати canplaythrough, щоб показати користувачеві індикатор готовності або прогрес завантаження, а тільки після цього дозволити натискати на кнопку "Play".

Щоб використати canplaythrough, вам потрібно додати слухача події до медіаелемента (наприклад, audio або video). Після того як подія спрацьовує, ви можете виконати будь-які дії, які необхідні для початку або підготовки відтворення.

const audioElement = document.querySelector('audio');

audioElement.addEventListener('canplaythrough', function(event) {
  console.log('Аудіо готове до безперервного відтворення!');
});

У цьому прикладі подія canplaythrough спрацьовує для елемента audio, коли браузер визначає, що аудіо готове до відтворення без зупинок. Функція обробника просто виводить повідомлення в консоль, що файл готовий до безперервного відтворення.

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

Деякі браузери також можуть мати власні обмеження на завантаження великих медіафайлів, тому використання події canplaythrough має бути добре продуманим для оптимізації продуктивності сайту або веб-додатку.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button id="playButton">Відтворити</button>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

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

// Приховуємо кнопку "Play" поки відео не буде готове
playButton.style.display = 'none';

video.addEventListener('canplaythrough', function() {
  // Показуємо кнопку "Play" після готовності відео
  playButton.style.display = 'inline';
});

playButton.addEventListener('click', function() {
  video.play();
});

<audio controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>

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

audio.addEventListener('canplaythrough', function() {
  // Автоматично відтворюємо аудіо після того, як воно буде готове
  audio.play();
});

// Виконуємо додаткову перевірку на випадок, якщо відтворення було заборонено
audio.addEventListener('play', function() {
  console.log('Аудіо відтворюється безперервно.');
});