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

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

ratechange — це подія JavaScript, яка спрацьовує щоразу, коли змінюється швидкість відтворення медіафайлу (наприклад, відео чи аудіо). Властивість playbackRate медіа-елемента контролює швидкість, з якою контент відтворюється. Подія ratechange дає можливість відслідковувати ці зміни, коли користувач змінює швидкість вручну через інтерфейс або коли вона змінюється програмно через JavaScript.

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

Щоб обробляти цю подію, використовується метод addEventListener. Він дозволяє прив’язати функцію обробника до події ratechange, яка буде викликатися щоразу при зміні швидкості.

Приклад використання:

let video = document.getElementById('myVideo');
video.addEventListener('ratechange', function() {
  console.log('Швидкість відтворення змінена на: ' + video.playbackRate);
});

У цьому прикладі подія ratechange використовується для виведення повідомлення у консоль кожного разу, коли змінюється швидкість відтворення відео. Поточна швидкість відображається через властивість playbackRate.

Подія ratechange спрацьовує не лише коли швидкість змінюється на більш високу або низьку, але й коли відбувається повернення до звичайної швидкості (1.0). Ви можете використати це для інформування користувача про будь-які зміни швидкості, що можуть впливати на його досвід перегляду або прослуховування контенту.

Одним із важливих аспектів цієї події є те, що її можна комбінувати з іншими подіями, як-от play або pause, для створення складних систем контролю відтворення, що адаптуються до користувацьких дій.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.addEventListener('ratechange', function(event) {
  // Ваш код
});

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let video = document.getElementById('myVideo');
let currentHour = new Date().getHours();

video.addEventListener('ratechange', function() {
  console.log('Швидкість відтворення: ' + video.playbackRate);
});

if (currentHour < 12) {
  video.playbackRate = 1.5; // Швидший перегляд вранці
} else {
  video.playbackRate = 1.0; // Стандартна швидкість вдень
}

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

let video = document.getElementById('myVideo');

video.addEventListener('ratechange', function() {
  console.log('Швидкість відтворення змінена: ' + video.playbackRate);
});

// Прискорюємо відтворення на перші 30 секунд відео
video.addEventListener('timeupdate', function() {
  if (video.currentTime > 30 && video.playbackRate != 1.0) {
    video.playbackRate = 1.0; // Повернення до звичайної швидкості після 30 секунд
    console.log('Швидкість відновлена до 1.0');
  }
});