HTML Video defaultPlaybackRate Property: Video Default Playback Rate

HTML Video defaultPlaybackRate Property: Controlling Default Playback Speed

The defaultPlaybackRate property in HTML’s <video> element specifies the default speed at which the video will play. This property allows you to set a preferred playback rate that the video will use unless overridden by the user or JavaScript. This guide provides a comprehensive overview of the defaultPlaybackRate property, including its syntax, usage, and practical examples.

What is the defaultPlaybackRate Property?

The defaultPlaybackRate property sets or returns the default playback speed of a video. The playback rate is a multiplier:

• 1.0 is normal speed
• 0.5 is half speed (slower)
• 2.0 is double speed (faster)
• -1.0 is reverse playback at normal speed (not supported in all browsers)

Purpose of the defaultPlaybackRate Property

The primary purpose of the defaultPlaybackRate property is to:

• Set the initial playback speed of a video when it loads.
• Ensure a consistent playback experience across different browsers and devices.
• Allow developers to specify a preferred playback rate that can be easily adjusted.

Syntax

Getting the defaultPlaybackRate

let defaultRate = video.defaultPlaybackRate;

Setting the defaultPlaybackRate

video.defaultPlaybackRate = rate;

Where rate is a number representing the desired playback rate.

Important Attributes

Understanding the key attributes of the defaultPlaybackRate property is crucial for effective use:

Note: The defaultPlaybackRate property only sets the default speed. The actual playback speed can be changed by the user or via the playbackRate property. 💡

Examples

Let’s explore some practical examples of using the defaultPlaybackRate property.

Setting the Default Playback Rate

This example demonstrates how to set the default playback rate of a video to 1.5 (150% of normal speed).

<video id="myVideo1" width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button onclick="setDefaultPlaybackRate1()">Set Default Playback Rate to 1.5</button>

<script>
  const video1 = document.getElementById("myVideo1");

  function setDefaultPlaybackRate1() {
    video1.defaultPlaybackRate = 1.5;
  }
</script>

In this example, clicking the button sets the defaultPlaybackRate to 1.5, so when the video is loaded or reset, it will start playing at 1.5 times the normal speed.

Getting the Default Playback Rate

This example shows how to get the current defaultPlaybackRate of a video and display it.

<video id="myVideo2" width="320" height="240" controls defaultPlaybackRate="0.75">
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<p id="playbackRateDisplay2">Default Playback Rate: <span id="rateValue2"></span></p>
<button onclick="getDefaultPlaybackRate2()">Get Default Playback Rate</button>

<script>
  const video2 = document.getElementById("myVideo2");
  const rateValueDisplay2 = document.getElementById("rateValue2");

  function getDefaultPlaybackRate2() {
    const rate2 = video2.defaultPlaybackRate;
    rateValueDisplay2.textContent = rate2;
  }
</script>

Clicking the button retrieves the defaultPlaybackRate and displays it in the paragraph element.

Dynamically Adjusting Playback Rate

This example demonstrates how to dynamically adjust the defaultPlaybackRate using input controls.

<video id="myVideo3" width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<label for="playbackRateInput3">Playback Rate:</label>
<input type="number" id="playbackRateInput3" min="0.25" max="2.0" step="0.25" value="1.0">
<button onclick="setDynamicPlaybackRate3()">Set Playback Rate</button>

<script>
  const video3 = document.getElementById("myVideo3");
  const playbackRateInput3 = document.getElementById("playbackRateInput3");

  function setDynamicPlaybackRate3() {
    const rate3 = parseFloat(playbackRateInput3.value);
    video3.defaultPlaybackRate = rate3;
  }
</script>

This example allows the user to enter a playback rate and dynamically set the defaultPlaybackRate of the video.

Resetting Playback Rate to Default

This example shows how to reset the playback rate to the default value using the defaultPlaybackRate property.

<video id="myVideo4" width="320" height="240" controls playbackRate="2.0" defaultPlaybackRate="0.5">
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button onclick="resetPlaybackRate4()">Reset Playback Rate to Default</button>

<script>
  const video4 = document.getElementById("myVideo4");

  function resetPlaybackRate4() {
    video4.playbackRate = video4.defaultPlaybackRate;
  }
</script>

In this example, clicking the button resets the current playbackRate to the defaultPlaybackRate of the video.

Real-World Applications of the defaultPlaybackRate Property

The defaultPlaybackRate property is valuable in various scenarios:

• Educational Videos: Setting a slower default playback rate for tutorials.
• Speed Review: Allowing users to quickly review video content at a faster rate.
• Accessibility: Providing options for users to adjust the playback speed according to their preferences.
• Video Editing: Setting a specific playback rate for previewing and editing video content.

Browser Support

The defaultPlaybackRate property is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Note: Always test your video implementations across different browsers to ensure consistent behavior. 🧐

Conclusion

The defaultPlaybackRate property provides a straightforward way to control the default playback speed of videos in HTML. By understanding its syntax, usage, and practical applications, you can create more engaging and user-friendly video experiences on the web. Happy coding!