Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Video playbackRate Property

  • Difficulty Level : Basic
  • Last Updated : 05 Aug, 2019

The Video playbackRate property in HTML DOM is used to set or return the current playback speed of the video. The video playbackRate property returns a number which represents the current playback speed.

Syntax:

  • It returns the Video playbackRate property.
    videoObject.playbackRate
  • It is used to set the Video playbackRate property.
    videoObject.playbackRate = playbackspeed

Property Values: It contains single value playbackspeed which specifies the default playback speed of the video. The available options are:

  • 1.0 is normal speed.
  • 0.5 is half speed.
  • 2.0 is double speed.
  • -1.0 is backwards, normal speed.
  • -0.5 is backwards, half speed.

Below program illustrates the Video playbackRate property in HTML DOM:

Example: This example sets the video playing speed to double.






<!DOCTYPE html>
<html>
      
<head>     
    <title>
        HTML DOM Video playbackRate Property
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:greenl">
        GeeksforGeeks
    </h1
      
    <h2 style="font-family: Impact;">
        Video PlaybackRate Property
    </h2><br>
      
    <video id="Test_Video" width="360" height="240" controls>
        <source src="samplevideo.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
    </video>
      
    <p>
        For returning the playback speed of the video,
        double click the "Return Playback Speed" button.
    </p>
      
    <button ondblclick="My_VideoRate()" type="button">
        Return Playback Speed
    </button>
      
    <p>
        For changing the playback speed of the video by default,
        double click the "Change Playback Speed" button.
    </p>
      
    <button ondblclick="Set_VideoRate()" type="button">
        Change Playback Speed
    </button>
      
    <script>
        var v = document.getElementById("Test_Video");
          
        function My_VideoRate() { 
            alert(v.playbackRate);
        
          
        function Set_VideoRate() { 
            v.playbackRate = 2;
        
    </script>
</body>
  
</html>                                                         

Output:

  • After loading the code:
  • Initial Playback Rate:
  • Updated Playback Rate:

Supported Browsers: The browser supported by Video playbackRate property are listed below:

  • Google Chrome
  • Internet Explorer 9.0/li>
  • Firefox
  • Opera
  • Apple Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :