JS властивість Event.canplay
Загальний опис
canplay — це подія HTML, яка спрацьовує, коли браузер визначає, що медіафайл (наприклад, аудіо або відео) готовий до відтворення принаймні частини даних. Це означає, що медіафайл достатньо завантажений або підготовлений для початкового відтворення, навіть якщо весь файл ще не завантажений.
Ця подія є корисною, коли вам потрібно виконати якісь дії в момент, коли медіафайл досягає стану, що дозволяє його відтворення. Наприклад, ви можете активувати кнопку "Play" для користувача тільки після того, як подія "canplay" спрацює, що гарантує, що медіафайл готовий до відтворення.
Для використання події "canplay", спочатку необхідно отримати доступ до медіаелемента (наприклад, audio або video) у вашому HTML документі, а потім додати слухача події за допомогою методу addEventListener.
const videoElement = document.querySelector('video');
videoElement.addEventListener('canplay', function(event) {
console.log('Відео готове до відтворення!');
});
У цьому прикладі ми отримуємо доступ до елемента video за допомогою querySelector і додаємо слухача події "canplay". Коли браузер визначає, що відео готове до відтворення, спрацьовує функція зворотного виклику, яка просто виводить повідомлення в консоль.
Важливо розуміти різницю між подіями "canplay" та "canplaythrough". Подія "canplay" спрацьовує, коли браузер може почати відтворення, але це не означає, що весь медіафайл можна відтворити без зупинки для буферизації. Подія "canplaythrough" спрацьовує, коли браузер вважає, що медіафайл можна відтворити повністю до кінця без будь-якої додаткової буферизації. Якщо ваше завдання — просто почати відтворення медіафайлу якомога швидше, "canplay" буде правильним вибором.
Ще однією корисною властивістю події "canplay" є можливість використовувати її для оптимізації поведінки користувацького інтерфейсу. Наприклад, ви можете показувати індикатор завантаження або прогресу, доки медіафайл не буде готовий до відтворення, а після спрацювання події "canplay" цей індикатор можна приховати, щоб користувач міг почати перегляд або прослуховування.
| Порада: | Для уникнення помилок на сторінках із багатьма медіафайлами корисно розуміти, що подія "canplay" може спрацьовувати кілька разів, особливо якщо користувач змінює якість відео або переключається між різними джерелами. В такому випадку може знадобитися видалити слухача події після першого спрацьовування або динамічно оновлювати інтерфейс. |
| Порада: | Подія "canplay" може бути використана для покращення SEO вашого сайту. Якщо ви автоматично запускаєте відео після його готовності до відтворення, це може покращити час перебування користувачів на вашій сторінці, що позитивно вплине на ранжування в пошукових системах. |
| Порада: | Іноді корисно використовувати подію "canplay" для моніторингу доступності медіафайлів у реальному часі. Наприклад, ви можете відстежувати подію, щоб записувати в журнал часу, скільки займає завантаження медіафайлу до стану, коли він готовий до відтворення. |
Синтаксис
element.addEventListener('canplay', function(event) {
// Код обробника події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як використовувати подію canplay для контролю за станом відео та забезпечення кращого користувацького досвіду. Коли сторінка завантажується, індикатор завантаження показується, і кнопки "Play" та "Pause" вимкнені. Після того, як подія canplay спрацьовує, індикатор зникає, і кнопки стають активними, дозволяючи користувачам взаємодіяти з відео. Також ми обробляємо подію waiting, щоб знову показувати індикатор завантаження, коли відео потребує буферизації.
У цьому прикладі, як тільки подія "canplay" спрацює, користувачу буде показане повідомлення "Відео готове до відтворення!". Це може бути корисно для надання користувачам інформації про стан завантаження медіафайлу.
const video = document.querySelector('video');
video.addEventListener('canplay', function() {
alert('Відео готове до відтворення!');
});Цей приклад показує, як динамічно змінювати стан кнопки "Play". Спочатку кнопка вимкнена, щоб запобігти спробам відтворення незавантаженого медіафайлу. Після того, як подія "canplay" спрацьовує, кнопка стає активною, що дозволяє користувачам відтворювати аудіофайл.
const audio = document.querySelector('audio');
const playButton = document.querySelector('#playButton');
playButton.disabled = true; // Вимикаємо кнопку "Play"
audio.addEventListener('canplay', function() {
playButton.disabled = false; // Вмикаємо кнопку "Play" після готовності медіа
});
playButton.addEventListener('click', function() {
audio.play();
});