El Atributo ONRATECHANGE

<video 
    src="video.mp4" 
    onratechange="manejarCambioVelocidad(event)"
></video>

// Mediante JavaScript:
elementoMedia.addEventListener('ratechange', (event) => {
    // Lógica aquí
});

<video id="miVideo" src="video.mp4" controls onratechange="actualizarVelocidad()"></video>
<p>Velocidad actual: <span id="velocidad">1x</span></p>

<script>
function actualizarVelocidad() {
    const video = document.getElementById('miVideo');
    document.getElementById('velocidad').textContent = 
        `${video.playbackRate.toFixed(1)}x`;
}
</script>

<video id="videoPlayer" src="clase.mp4" controls></video>
<div class="speed-controls">
    <button onclick="cambiarVelocidad(0.5)">0.5x</button>
    <button onclick="cambiarVelocidad(1)">Normal</button>
    <button onclick="cambiarVelocidad(1.5)">1.5x</button>
    <input 
        type="range" 
        min="0.5" 
        max="3" 
        step="0.25" 
        value="1"
        oninput="cambiarVelocidad(this.value)"
    >
</div>

<script>
const video = document.getElementById('videoPlayer');

// Actualizar velocidad y UI
function cambiarVelocidad(rate) {
    video.playbackRate = parseFloat(rate);
}

// Detectar cambios automáticos
video.addEventListener('ratechange', () => {
    document.querySelector('input[type="range"]').value = video.playbackRate;
});
</script>

<style>
.speed-controls {
    margin: 15px;
    padding: 10px;
    background: #f0f0f0;
}
</style>

<video id="videoTutorial" src="tutorial.mp4" onratechange="ajustarSubtitulos()"></video>
<div id="subtitulos"></div>

<script>
const subtitles = [
    { time: 0, text: "Introducción..." },
    { time: 5, text: "Primer concepto clave..." },
    { time: 10, text: "Ejemplo práctico..." }
];

function ajustarSubtitulos() {
    const video = document.getElementById('videoTutorial');
    const adjustedTime = video.currentTime / video.playbackRate;
    
    const currentSub = subtitles.find(sub => 
        adjustedTime >= sub.time && adjustedTime < sub.time + 3
    );
    
    document.getElementById('subtitulos').textContent = 
        currentSub?.text || '';
}
</script>

// Ajustar velocidad según complejidad del contenido
const segmentosVideo = [
    { start: 0, end: 30, velocidadRecomendada: 1.0 },
    { start: 30, end: 60, velocidadRecomendada: 0.75 }
];

video.addEventListener('timeupdate', () => {
    const segmentoActual = segmentosVideo.find(seg => 
        video.currentTime >= seg.start && video.currentTime < seg.end
    );
    
    if (segmentoActual && video.playbackRate !== segmentoActual.velocidadRecomendada) {
        video.playbackRate = segmentoActual.velocidadRecomendada;
    }
});

let velocidadCambios = [];

video.addEventListener('ratechange', () => {
    velocidadCambios.push({
        tiempo: video.currentTime,
        velocidad: video.playbackRate,
        fecha: new Date()
    });
    
    // Enviar datos al servidor cada 30 segundos
    if (video.currentTime % 30 === 0) {
        enviarAnaliticas(velocidadCambios);
        velocidadCambios = [];
    }
});

<audio id="audioLibro" src="audiobook.mp3"></audio>

<script>
const audio = document.getElementById('audioLibro');
const context = new AudioContext();
const source = context.createMediaElementSource(audio);

// Ajustar tono al cambiar velocidad
audio.addEventListener('ratechange', () => {
    const playbackRate = audio.playbackRate;
    const pitchShift = playbackRate > 1 ? 1.2 : 0.8;
    
    // Aplicar efecto de tono (requiere Web Audio API)
    const pitchNode = new PitchShift(context);
    pitchNode.pitch = pitchShift;
    source.connect(pitchNode).connect(context.destination);
});
</script>

<div class="video-container">
    <video id="proPlayer" src="video.mp4"></video>
    <div class="controls">
        <button class="speed-btn" data-rate="0.75">0.75x</button>
        <button class="speed-btn active" data-rate="1">1x</button>
        <button class="speed-btn" data-rate="1.25">1.25x</button>
        <button class="speed-btn" data-rate="1.5">1.5x</button>
    </div>
</div>

<script>
const player = document.getElementById('proPlayer');
document.querySelectorAll('.speed-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const rate = parseFloat(btn.dataset.rate);
        player.playbackRate = rate;
        
        document.querySelectorAll('.speed-btn').forEach(b => 
            b.classList.remove('active')
        );
        btn.classList.add('active');
    });
});

player.addEventListener('ratechange', () => {
    const currentRate = player.playbackRate;
    document.querySelector(`[data-rate="${currentRate}"]`)?.classList.add('active');
});
</script>

<style>
.speed-btn.active {
    background: #2ecc71;
    color: white;
}
</style>