Javascript DOM HTML Video playbackRate Property set

Introduction

Set a video to play in slow motion: 

document.getElementById("myVideo").playbackRate = 0.5;

View in separate window 

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="100" height="100" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video><br>
<p id="demo"></p>
<button onclick="getPlaySpeed()" type="button">get playback speed</button>
<button onclick="setPlaySpeed()" type="button">Set video to be play in slow motion</button>

<script>
var x = document.getElementById("myVideo");

function getPlaySpeed() {/* www  .  java 2s .c o m*/
  document.getElementById("demo").innerHTML = x.playbackRate;
}

function setPlaySpeed() {
  x.playbackRate = 0.5;
}
</script>

</body>
</html>

The playbackRate property sets or gets the current playback speed of the video.

Example values:

  • 1.0 is normal speed
  • 0.5 is half speed (slower)
  • 2.0 is double speed (faster)
  • -1.0 is backwards, normal speed
  • -0.5 is backwards, half speed

The playbackRate property returns a Number representing the current playback speed.




PreviousNext

Related