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, для створення складних систем контролю відтворення, що адаптуються до користувацьких дій.
| Порада: | Коли змінюється швидкість відтворення, важливо оновлювати інтерфейс користувача, щоб відобразити поточну швидкість. Наприклад, змініть текст кнопок або повідомлення в екрані, що вказує на зміну швидкості. |
| Порада: | Для тестування і навчання ви можете дозволити користувачам експериментувати зі швидкістю відтворення і відстежувати їхні дії. Використовуйте подію |
| Порада: | Під час роботи з відео у веб-додатках для навчання або інструкцій можна рекомендувати різні швидкості відтворення залежно від вмісту. Використовуйте |
Синтаксис
element.addEventListener('ratechange', function(event) {
// Ваш код
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад дозволяє користувачам змінювати швидкість відтворення відео за допомогою трьох кнопок: "Повільніше", "Нормальна швидкість" і "Швидше". При кожній зміні швидкості подія ratechange оновлює відображену поточну швидкість на сторінці, показуючи користувачу актуальну інформацію. Це ідеальний спосіб показати, як працює подія ratechange і як можна динамічно змінювати швидкість відтворення в інтерактивному інтерфейсі.
У цьому прикладі швидкість відтворення відео змінюється автоматично залежно від часу доби. Вранці відео відтворюється швидше (1.5x), щоб прискорити перегляд. Подія ratechange виводить поточну швидкість у консоль щоразу, коли вона змінюється.
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; // Стандартна швидкість вдень
}Цей приклад змінює швидкість відео в залежності від часу перегляду. Відео прискорюється на початкові 30 секунд, а потім автоматично повертається до нормальної швидкості. Подія ratechange дозволяє відстежувати момент, коли швидкість змінюється, що корисно для налаштування перегляду залежно від контексту.
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');
}
});