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, для створення складних систем контролю відтворення, що адаптуються до користувацьких дій.
- Порада
-
Для тестування і навчання ви можете дозволити користувачам експериментувати зі швидкістю відтворення і відстежувати їхні дії. Використовуйте подію
автор: Bondratechange, щоб зберігати інформацію про те, як часто вони змінюють швидкість і на які значення. - Порада
-
Під час роботи з відео у веб-додатках для навчання або інструкцій можна рекомендувати різні швидкості відтворення залежно від вмісту. Використовуйте
автор: Bondratechange, щоб автоматично змінювати швидкість відео при настанні певних умов. - Порада
-
Коли змінюється швидкість відтворення, важливо оновлювати інтерфейс користувача, щоб відобразити поточну швидкість. Наприклад, змініть текст кнопок або повідомлення в екрані, що вказує на зміну швидкості.
автор: Bond
Синтаксис
element.addEventListener('ratechange', function(event) {
// Ваш код
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<video id="myVideo" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
let video = document.getElementById('myVideo');
let currentHour = new Date().getHours();
video.addEventListener('ratechange', function() {
console.log('Швидкість відтворення: ' + video.playbackRate);
});
video.src = silentWav(30);
if (currentHour < 12) {
video.playbackRate = 1.5; // Швидший перегляд вранці
} else {
video.playbackRate = 0.75; // Спокійніший темп у другій половині дня
}
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<header>
<h2 class="title">HTML Events: ratechange</h2>
<p class="description">Відстежує зміни швидкості відтворення медіафайлу (відео або аудіо).</p>
</header>
<main>
<div class="result">
<!-- Відео для демонстрації -->
<video id="myVideo" width="320" height="240" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не підтримує відео тег.
</video>
<!-- Кнопки для зміни швидкості -->
<div class="controls">
<button id="slower">Повільніше</button>
<button id="normal">Нормальна швидкість</button>
<button id="faster">Швидше</button>
</div>
<!-- Відображення поточної швидкості відтворення -->
<p id="rateDisplay">Поточна швидкість: 1.0x</p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.controls {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-right: 10px;
}
p#rateDisplay {
margin-top: 10px;
font-size: 14px;
font-weight: bold;
}JS
let video = document.getElementById('myVideo');
let rateDisplay = document.getElementById('rateDisplay');
let slowerButton = document.getElementById('slower');
let normalButton = document.getElementById('normal');
let fasterButton = document.getElementById('faster');
// Відстежуємо зміну швидкості відтворення
video.addEventListener('ratechange', function () {
rateDisplay.textContent = `Поточна швидкість: ${video.playbackRate}x`;
});
// Зміна швидкості на повільнішу
slowerButton.addEventListener('click', function () {
video.playbackRate = 0.5;
});
// Зміна швидкості на нормальну
normalButton.addEventListener('click', function () {
video.playbackRate = 1.0;
});
// Зміна швидкості на швидшу
fasterButton.addEventListener('click', function () {
video.playbackRate = 1.5;
});
// Джерело: беззвучний WAV, зібраний тут-таки (див. silentWav нижче)
video.src = silentWav(30);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="myVideo" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
let video = document.getElementById('myVideo');
video.addEventListener('ratechange', function() {
console.log('Швидкість відтворення змінена: ' + video.playbackRate);
});
// Прискорюємо відтворення на перші три секунди
video.addEventListener('timeupdate', function() {
if (video.currentTime > 3 && video.playbackRate != 1.0) {
video.playbackRate = 1.0; // Повернення до звичайної швидкості після трьох секунд
console.log('Швидкість відновлена до 1.0');
}
});
video.src = silentWav(30);
video.playbackRate = 2.0;
video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!