How to change video playback speed using JavaScript?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to change video playback speed using JavaScript?

王林

Aug 26, 2023 am 10:05 AM

如何使用 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 id="TutorialsPoint-Sample-Video">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.

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 id="TutorialsPoint-Sample-Video">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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

See all articles