search

Home  >  Article  >  Web Front-end  >  How to change video playback speed using JavaScript?

How to change video playback speed using JavaScript?

王林
王林forward
2023-08-26 10:05:193058browse

如何使用 JavaScript 改变视频播放速度？

In this article, we will learn how to change the playback speed of a video using the HTML5 video tag Embedded in HTML document.

A number less than 1 will slow down the video, a number greater than 1 will speed up the video, then The number 1 will return the video to its original speed. Also note that playbackRate is a property instead of HTML attributes.

Although you don't want to change the playback rate for each video site, you can do so if you want Think your visitors will like it more. This only requires one HTML element to set up!

The PlaybackRate property allows us to change the playback speed. These are its grammatical rules.

grammar

let video = document.querySelector('video')
video.playbackRate = newPlaybackRate

Users can easily modify the default playback speed by using the defaultPlaybackRate parameter. it Use the syntax listed below.

grammar

let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()

Example 1

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      p {
         margin-top: 5%;
      }
      button {
         margin-right: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video width="420" height="240" controls loop>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      The video tag is incompatible with your browser.
   </video>
   <p>
      <button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button>
      <button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button>
   </p>
   <script>
      let video = document.querySelector('video');
      
      // Make the playing speed the default
      video.defaultPlaybackRate = 0.5
      
      // The video is loaded after setting
      video.load();
      function speedUp() {
         
         // The playback speed has been increased by 1
         video.playbackRate += 1;
      }
      function speedDown() {
         
         // The playback speed has been decreased by 1
         if (video.playbackRate > 1)
            video.playbackRate -= 1;
      }
   </script>
</body>
</html>

Example 2

The playback speed of audio or video is set or returned through the playbackRate attribute.

Value of attribute

value describe
Play speed

Display audio or video speed Currently playing.

Type of situation value -

  • The usual speed is 1.0.
  • Half speed is 0.5. (Slower)
  • 2.0 is twice as fast (faster)
  • Backward is -1.0 and normal speed
  • Reverse half speed is -0.5.

The playbackRate attribute of HTML audio/video DOM

What is the playback speed?

Media is played back at a defined rate based on the playbackRate property. With this, users Realizes the control of fast forward, slow motion and other functions. A value of 1.0 means Standard speed, calculated by multiplying the current rate by the usual playback rate.

What playback speed is perfect?

Most browsers will pause audio outside of playback Video has rate limits of 0.5 and 4 Play without sound. For most cases you should keep the range between 0.5 and 4 app. 

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      button {
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video id="myVideo" width="420" height="240" controls>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      HTML5 video is not compatible with your browser.
   </video>
   <br>
   <button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button>
   <button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br>
   <script>
      let demoVideo = document.getElementById("myVideo");

      function getSpeed() {
         alert(demoVideo.playbackRate);
      }
      function setSpeed() {
         demoVideo.playbackRate = 0.5;
      }
   </script>
</body>
</html>

After clicking the "Get Play Frequency" button, you will see the following screen.

Also, after clicking the "Slow Motion Video" button and then clicking "Get", you will see him at the bottom of the screen Play frequency" button.

Introduction

In the example above, the variable (demoVideo in this case) is used to change the playback speed (or anything we want to do). For example, just enter demoVideo and change playbackRate to 2. Run twice as fast. playbackRate is equal to 2.

The conclusion to all this. When you press play, the video will play twice as fast usually. Do you like it running at half speed? Instead, set playbackRate to 0.5. want it to recover Running at normal speed? Basically, set playbackRate to 1.

The above is the detailed content of How to change video playback speed using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 html dom
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create a string that is half uppercase and half lowercase?Next article：How to create a string that is half uppercase and half lowercase?

Related articles

See more