HTML-attributes-onratechange

The onratechange attribute defines a script to be run when the playing speed of the audio/video is changed (like when a user switches to a slow motion or fast forward mode).

syntax

script: this attribute contains a "single value script", which works when the onratechange event attribute is called.

some examples

Change the speed of the audio

code:

                    <audio style="margin-left:3vw;" id="myAudio" controls onratechange="audioSpeed()">
                        <source src="../../pics/horse.wav" type="audio/wav">
                        Your browser does not support the audio element.
                    </audio>
                <p class="spec" id="demo">Change the speed of the audio</p>
                <input style="margin-left:3vw;" type="range" min="0.5" max="3" step="0.1" 
                value="1" oninput="changeRate(this)">
                <script>
                        function audioSpeed() {
                        document.getElementById("demo").innerHTML = "The audio's speed is " + 
                        document.getElementById("myAudio").playbackRate;
                        }
                    
                        function changeRate(obj) {
                        document.getElementById("myAudio").playbackRate = obj.value;
                        }
                    </script>

Change the speed of the video

codes:

                    <video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls 
                    onratechange="videoSpeed()">
                        <source src="../../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
                        Your browser does not support HTML5 video.
                    </video>
                    <p class="spec" id="demo_A">Change the speed of the video</p>
                    <input style="margin-left:3vw;" type="range" min="0.1" max="3" step="0.1" value="1" 
                    oninput="rateChange(this)">
                    <script>
                        function videoSpeed() {
                        document.getElementById("demo_A").innerHTML = "The video's speed is " + 
                        document.getElementById("myVideo").playbackRate;
                        }
                        
                        function rateChange(obj) {
                        document.getElementById("myVideo").playbackRate = obj.value;
                        }
                    </script>

HTML - attributes - onratechange

Content

"onratechange" attribute : script to run when speed changes

syntax

some examples