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

A brief discussion on using virtual lists to optimize tables in el-table

Table of contents Preface Solution Specific imple...

Detailed explanation of the basic use of centos7 firewall in linux

1. Basic use of firewalld start up: systemctl sta...

Distributed monitoring system Zabbix uses SNMP and JMX channels to collect data

In the previous article, we learned about the pas...

React Hook usage examples (6 common hooks)

1. useState: Let functional components have state...

A brief discussion on Mysql specified order sorting query

Recently, I have been working on a large-screen d...

Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect

Table of contents 1. Introduction 2. Usage 3. Dev...

Common usage of regular expressions in Mysql

Common usage of Regexp in Mysql Fuzzy matching, c...

Example code for using CSS to darken the font color of the selected area when scrolling

When encapsulating the date picker, you need to d...

Detailed explanation of the difference between JavaScript spread operator and rest operator

Table of contents What is the rest operator? How ...

How to use docker to build redis master-slave

1. Build a Docker environment 1. Create a Dockerf...

impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a ...

Differences and comparisons of storage engines in MySQL

MyISAM storage engine MyISAM is based on the ISAM...

The hottest trends in web design UI in 2013 The most popular UI designs

Time flies, and in just six days, 2013 will becom...

Sharing of SVN service backup operation steps

SVN service backup steps 1. Prepare the source se...

Better looking CSS custom styles (title h1 h2 h3)

Rendering Commonly used styles in Blog Garden /*T...