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 має бути добре продуманим для оптимізації продуктивності сайту або веб-додатку.
| Порада: | Для більш точного контролю над відтворенням медіафайлів, розгляньте можливість використання |
| Порада: | Використовуйте |
| Порада: | Якщо ви працюєте над мобільною версією вашого сайту або додатку, враховуйте, що подія |
Синтаксис
element.addEventListener('canplaythrough', function(event) {
// Код обробника події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі відео починає завантажуватися з моменту завантаження сторінки, а індикатор завантаження (loadingIndicator) показується, доки відео не буде повністю готове до безперервного відтворення. Подія canplaythrough сигналізує про готовність відео до відтворення, і ми використовуємо її, щоб сховати індикатор завантаження та активувати кнопку "Play". Якщо відео потребує додаткової буферизації під час відтворення, подія waiting знову показує індикатор, а подія playing — приховує його. Це дозволяє створити більш інтерактивний та інтуїтивно зрозумілий відеоплеєр для користувачів.
У цьому прикладі кнопка "Play" відображається лише тоді, коли подія canplaythrough спрацьовує, що означає, що відео готове до безперервного відтворення. Це забезпечує кращий користувацький досвід, особливо для великих відеофайлів.
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();
});У цьому прикладі аудіо автоматично починає відтворюватися після того, як подія canplaythrough спрацьовує, що означає, що аудіо завантажено достатньо для безперервного відтворення. Це особливо корисно для створення потокових аудіосервісів або музичних плеєрів.
const audio = document.querySelector('audio');
audio.addEventListener('canplaythrough', function() {
// Автоматично відтворюємо аудіо після того, як воно буде готове
audio.play();
});
// Виконуємо додаткову перевірку на випадок, якщо відтворення було заборонено
audio.addEventListener('play', function() {
console.log('Аудіо відтворюється безперервно.');
});