Double speed video playback — flex layout + JavaScript

Time:2020-12-3

This case is the learning result of the class. This article is only used as the learning summary record. Welcome to learn and exchange.

1、 DisplayDouble speed video playback -- flex layout + JavaScript

2、 Conception

  1. Video tag
  2. JavaScript adjusts the speed of video playback

3、 Implementation

  1. Video beautification: Flex layout
  2. Add slider element: Flex layout
  3. Drag the slider to realize double speed playback of video: Javascript

    • Gets the wrapper element of the slider: following.speedselector
    • Get the slider element: the.speed-barselector
    • The coordinate (y) distance to which the mouse movesSlider wrapperThe height of issliderHeight: belowpercentVariable(heightconversionpercentIs a percentage)
    • When the slider height changes, the double speed of the video changes

      Core logic: VAR playbackrate = percent * (max – min) + min– > let the calculated height (decimal) be within the specified playback speed range [0.4, 4]

      • (max – min): the increment of double speed. Set the minimum playback speed to0.4, up to4
      • Percent * (max – min): the range of height (decimal) is within[0 ,3.6]between
      • Percent * (max – min) + Min: after adding the minimum value of 0.4 to the range of height (decimal), you can get the range of height (decimal) within[0.4 , 4]between
    1. code

      • HTML section

        <div class="wrapper">
            <video width="765" height="430" controls class="flex"</video>
        <div class="speed">
          <div class="speed-bar">1x</div>
        </div>
        </div>
  • CSS part (Flex)

    * {
        margin: 0;
        padding: 0;
      }
      body {
        background:#4c4c4c url('https://unsplash.it/1500/900?image=1021');
        /*Cover the entire container*/
        background-size: cover;
        /*Minimum height: 100 views*/
        min-height: 100vh;
        display: flex;
        Justify-content: center; / * align along the main axis (horizontal)*/
        Align items: Center; / * align items along the cross axis (vertical)*/
      }
      .wrapper {
        /*The first way to write in the middle*/
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
        width: 850px;
        display: flex;
      }
      /* .flex {
        Set the proportion of the child container to the width of the parent container after the parent container has set the elastic layout. 1 is 1 portion
        flex: 1;
      } */
      .speed {
        background-color: #ffffff;
        /*The parent container sets display: Flex; when the child Container Sets flex: 1;, the child container will inherit the height of the parent container evenly*/
        flex: 1;
        /*The width of the parent container has been set, and the outer margin of the child container consumes the width of the parent container, so the label becomes smaller*/
        margin: 10px;
        border-radius: 50px;
        /* text-align: center; */
        display: flex;
        align-items: flex-start;
        overflow: hidden;
      }
      .speed-bar {
        /* width: 100%; */  /* width:100%; And flex: 1; are interchangeable*/
        flex: 1;
        height: 16.3%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*Linear gradient: from the position of - 170DEG, it changes from 0% height to 100% height*/
        /*The angle starts at 0 and changes from the color of the third parameter to the color of the second parameter, positive clockwise and negative counterclockwise*/
        background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
        color: #fff;
        cursor: pointer;
      }
  • JavaScript part

    /*1. Get the DOM structure to be operated
    2. Moving the mouse on this DOM can control the position of the slider
    3. It can control the height of the DOM to change
    4. Adjust the video playback speed according to the DOM height
    */
    
    var speed = document.querySelector('.speed')
    var bar = document.querySelector('.speed-bar')
    var video = document.querySelector('.flex')
    
    /*Registration events*/
    speed.addEventListener('mousemove', function(event) {
      // console.log(event);
      var y = event.pageY - speed.offsetTop
      var percent = y /  speed.offsetHeight  //Gets the height of the DOM structure itself
      var min = 0.4
      var max = 4
      var height = Math.round(percent * 100) + '%'
      Var playbackRate = percent * (max - min) + min / * makes the formula appear between 0.4 and 4*/
      // console.log(percent + '+' + playbackRate);
      bar.style.height = height
      /*Playbackrate playback speed*/
      video.playbackRate = playbackRate
      bar.textContent = playbackRate.toFixed(2) + 'x'
    
    })

4、 Summary

  1. CSS part

    • Element horizontal vertical center (add flex layout to parent element)

      body {
        /*Minimum height: 100 views*/
        min-height: 100vh;
        display: flex;
        Justify-content: center; / * align along the main axis (horizontal)*/
        Align items: Center; / * align items along the cross axis (vertical)*/
      }
    • Container parent settingsdisplay: flex;Sub containers can be setflex: 1;The number taken by flex means pressHow many?Of the parent containerwidthFor example, 1 means that the element bisects the width of the parent container

      /*Parent container*/
      .wrapper {
        width: 850px;
        display: flex;
      }
      
      /*Sub container*/
       .flex {
        flex: 1;
      }
    • align-items: flex-start;Indicates that the vertical alignment of the child elements is along the top of the cross axis
    • When the parent container is setdisplay: flex;When the child container has only one element, you can set theflex: 1;orwidth: 100%;To occupy all the width of the parent container
    • Usage of gradient color:linear-gradient

      /*Linear gradient: from the position of - 170DEG, it changes from 0% height to 100% height*/
      
      /*The angle starts at 0 and changes from the color of the third parameter to the color of the second parameter, positive clockwise and negative counterclockwise*/
      background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
  2. JavaScript part

    • document.querySelector ('class selector '): gets the label of the specified class selector in the dom
    • Addeventlistener ('event ', method (event parameter)): add event listening method to the specified tag variable, listen to the event, and do corresponding operation in the method when the event occurs
    • pageYThe Y axis of the specified event
    • offsetTop: the distance of the element from the top of the page
    • offsetHeight: the height of the element itself
    • Elements style.height: sets the height of the element style
    • playbackRate: the attribute in the video tab that controls playback at multiple speeds
    • textContent: gets the content of the tag

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]