JS implements simple example code to control video playback speed

JS implements simple example code to control video playback speed

introduction

I discovered a problem before: sometimes when I watch some learning videos, I always complain that the movements are too slow, and it is a waste of time for the teacher to write on the blackboard. If I could control the playback speed to an appropriate level, it would not only improve my learning efficiency, but also make me more comfortable watching. So I learned to write the following web page, implemented through Html+CSS+JavaScript.

Tip: The following is the main content of this article. The following cases can be used for reference

1. Finished product effect

This is a screenshot of my finished product.

2. Specific Implementation

1. HTML+CSS to achieve simple layout

The code is as follows (example):

<!DOCTYPE html>
<html lang="en">
<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="style.css" rel="external nofollow" >
    <title>Video Playback</title>
    
</head>
<body>
    <div id="wrapper">
        <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"></video>
        
        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
        
    </div>
    

    <script src="./index.js"></script>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;/* vh relative unit, relative to the browser size*/
    background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;/*Use the container as the basis and cover the container completely, even if the image is distorted or blurred*/
    /*margin: auto;/* margin:auto and margin:0 auto, but the width and height of the parent container are unknown, so it is not suitable*/
    display: flex;/*Set the container to a flexible container*/
    justify-content: center; /*Center in the X direction*/
    align-items: center; /*Center in the Y direction*/ /*Extracurricular extension: All ways to center the box in the vertical direction*/
}
#wrapper{
    width: 850px;
    display: flex;
}
.speed{
    flex: 1;/*Ratio inheritance, it should be 1:1 inheritance, but vedio has a fixed width, so speed takes the remaining width*/
    margin: 10px;
    background-color: #fff;
    border-radius: 50px;
    display: flex;
    overflow: hidden;/*It is used to stipulate that the child container cannot exceed the limit and maintain the rounded corner effect of the parent class*/
    align-items: flex-start;/* */

}
.speed-bar{
    width: 100%;
    height: 16.3%;
    background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%); /*Set the gradient color style*/
    display: flex; /* Allows the container to set the next two styles */
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

The layout of HTML is quite standard. It just sets an ID selector for packaging, and then uses the built-in video playback function of H5 through the video tag. The video played can be changed by changing the src.
In the css, just pay attention to the use of elastic boxes, and use the elastic container to set the horizontal and vertical center of the video

2. JS implementation function

The code is as follows (example):

//1. Get the DOM structure to be operated //2. Get the distance the mouse slides on the DOM //3. Change the height of the DOM //4. Change the playback speed of the video //Get the corresponding DOM structure var speed = document.querySelector ('.speed') //Supplement: getElementsByClassName is to get the class selector var bar = document.querySelector ('.speed-bar')
var video = document.querySelector('.flex')

speed.addEventListener('mousemove',function(e){ //In simple terms, it points to the current event (click, mouseover, etc.) and saves the information of the current event. For example, a mouse click event has the mouse coordinate information.
    //console.log(e);
    var y = e.pageY-speed.offsetTop //The distance of the mouse in the right container offsetTop is to get the distance from a certain DOM structure to the top of the browser var percent = y / speed.offsetHeight //offsetHeight is to get the height of a certain DOM structure itself var min = 0.4 //Set the speed limit var max = 4
    var playbackRate = percent * (max-min)+min //speed calculation var height = Math.round(percent * 100)+'%' //Math.abs() also takes absolute value bar.textContent = playbackRate.toFixed(2)+'×' //Change the text content in DOM toFixed(x) retains x decimal places video.playbackRate = playbackRate //Adjust the playback speed of the video bar.style.height = height //Adjust the display height of the multiple text })
//Note: The two parameters of the function are: listen for mouse click events, define the function inside the function, and become the callback function

The key is to realize the control function at s. When writing the Js section, we should be clear about what we want Js to do for us.

1. Get the DOM structure to be operated
2. Get the distance the mouse slides on the DOM
3. Change the height of the DOM
4. Change the playback speed of the video

With the goal in mind, we will implement it one by one. For the specific implementation, you can directly refer to the original code. Here we will focus on the callback function and the principle of mouse speed control. You can see
speed.addEventListener("mousemove", function(e){)
This is a callback function. When mousemove occurs, the function (e) will be executed. tmousemove is used to monitor the mouse position.

This is the end of this article about how to use JS to simply control the video playback speed. For more relevant js video playback speed content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of how to use the Js video player plug-in Video.js
  • How to solve the m3u8 video playback format through vue video.js
  • Vue uses video.js for video playback
  • vue + typescript + video.js to realize streaming video monitoring function
  • video.js Example code for playing multiple videos simultaneously on one page
  • Example of how to play m3u8 video stream with Vue combined with Video.js
  • Summary of jsp video file playback methods
  • How to use the flv video player plug-in of js
  • JavaScript to implement a simple HTML5 video player
  • Use javascript to monitor video playback and print logs

<<:  How to modify the time zone and time in Ubuntu system

>>:  Detailed explanation of the code between the MySQL master library binlog (master-log) and the slave library relay-log

Recommend

Common scenarios and avoidance methods for index failure in MySQL

Preface I have read many similar articles before,...

Solve the problem of docker pull being reset

This article introduces how to solve the problem ...

js to achieve 3D carousel effect

This article shares the specific code for impleme...

A brief discussion on the correct approach to MySQL table space recovery

Table of contents Preliminary Notes Problem Repro...

Detailed explanation of the decimal padding problem of decimal data type in MySQL

Preface During the development process, we often ...

Windows 10 and MySQL 5.5 installation and use without installation detailed tutorial (picture and text)

This article introduces the installation and use ...

Some thoughts and experience sharing on web page (website) design and production

First, before posting! Thanks again to I Want to S...

Detailed example of how to implement transaction commit and rollback in mysql

Recently, we need to perform a scheduled migratio...

Detailed explanation of the best configuration for Nginx to improve security and performance

It mainly shows how to configure X-Frame-Options,...

JavaScript clicks the button to generate a 4-digit random verification code

This article example shares the specific code of ...

js uses FileReader to read local files or blobs

Table of contents FileReader reads local files or...

How to implement DIV's blur function

Use anti-shake to make DIV disappear when the mou...

Detailed explanation of the use of default in MySQL

NULL and NOT NULL modifiers, DEFAULT modifier, AU...

Example of using JSX to build component Parser development

Table of contents JSX environment construction Se...

MySQL code execution structure example analysis [sequence, branch, loop structure]

This article uses an example to describe the MySQ...