HTML में प्लेबैक दर बदलने पर स्क्रिप्ट कैसे निष्पादित करें?

onratechange इवेंट एट्रिब्यूट

onratechange एट्रिब्यूट HTML में मीडिया तत्व (<audio>, <video>) की प्लेबैक दर बदलने पर स्क्रिप्ट निष्पादित करता है। यह playbackRate प्रॉपर्टी बदलने पर या उपयोगकर्ता द्वारा प्लेबैक गति नियंत्रण उपयोग करने पर ट्रिगर होता है।

उदाहरण

निम्नलिखित कोड onratechange एट्रिब्यूट का उपयोग दिखाता है:

<!DOCTYPE html>
<html>
<body>
    <h2>प्लेबैक दर परिवर्तन डेमो</h2>
    <video id="myVideo" width="320" height="176" controls onratechange="displayRate()">
        <source src="/html5/foo.ogg" type="video/ogg">
        <source src="/html5/foo.mp4" type="video/mp4">
        आपका ब्राउज़र वीडियो तत्व का समर्थन नहीं करता।
    </video>
    <p id="rateDisplay">वीडियो की गति बदलें</p>
    <label>
        गति: 
        <input type="range" id="speedControl" min="0.25" max="3" step="0.25" value="1" 
               oninput="updateRate(this.value)">
        <span id="speedValue">1.0x</span>
    </label>
    
    <script>
        function displayRate() {
            const video = document.getElementById('myVideo');
            document.getElementById('rateDisplay').innerHTML = 
                'वर्तमान गति: ' + video.playbackRate.toFixed(2) + 'x';
        }
        
        function updateRate(value) {
            const video = document.getElementById('myVideo');
            video.playbackRate = parseFloat(value);
            document.getElementById('speedValue').textContent = value + 'x';
        }
    </script>
</body>
</html>

playbackRate प्रॉपर्टी

defaultPlaybackRate vs playbackRate

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

// डिफ़ॉल्ट प्लेबैक दर (रिलोड/रीसेट पर लागू)
video.defaultPlaybackRate = 1.5; // डिफ़ॉल्ट 1.5x सेट करें

// वर्तमान प्लेबैक दर (तत्काल प्रभाव)
video.playbackRate = 2.0; // अभी 2x चलाएँ

// रीसेट करने पर defaultPlaybackRate उपयोग होता है
video.load(); // playbackRate → defaultPlaybackRate पर रीसेट

पिच सुधार (पिच करेक्शन)

तेज/धीमे प्लेबैक पर ऑडियो पिच स्वाभाविक रूप से बदलती है। preservesPitch प्रॉपर्टी (डिफ़ॉल्ट: true) इसे सही करती है:

video.preservesPitch = true;  // डिफ़ॉल्ट: पिच सामान्य रखें (टाइम-स्ट्रेचिंग)
video.preservesPitch = false; // पिच को गति के साथ बदलने दें (चिपमंक/धीमा प्रभाव)

कीबोर्ड शॉर्टकट्स के साथ पूर्ण नियंत्रण

<video id="player" src="video.mp4" controls></video>
<p>कीबोर्ड शॉर्टकट्स: [ धीमा, ] तेज, \ सामान्य, Space प्ले/पॉज</p>

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

document.addEventListener('keydown', (e) => {
    // इनपुट फील्ड्स में टाइप करते समय नजरअंदाज करें
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
    
    switch (e.key) {
        case '[':
            video.playbackRate = Math.max(0.25, video.playbackRate - 0.25);
            break;
        case ']':
            video.playbackRate = Math.min(4, video.playbackRate + 0.25);
            break;
        case '\\':
            video.playbackRate = 1.0;
            break;
        case ' ':
            e.preventDefault();
            video.paused ? video.play() : video.pause();
            break;
    }
    
    showRate();
});

function showRate() {
    console.log(`प्लेबैक दर: ${video.playbackRate.toFixed(2)}x`);
}
</script>