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" може спрацьовувати кілька разів, особливо якщо користувач змінює якість відео або переключається між різними джерелами. В такому випадку може знадобитися видалити слухача події після першого спрацьовування або динамічно оновлювати інтерфейс.

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

Порада

Подія "canplay" може бути використана для покращення SEO вашого сайту. Якщо ви автоматично запускаєте відео після його готовності до відтворення, це може покращити час перебування користувачів на вашій сторінці, що позитивно вплине на ранжування в пошукових системах.

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

Порада

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

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

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

Синтаксис

element.addEventListener('canplay', 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('canplay', function() {
  alert('Відео готове до відтворення!');
});

<button id="playButton">Відтворити</button>
<audio controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>

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();
});