关于javascript:视频倍速播放flex布局JavaScript

本案例为课上学习成绩，该文章仅作为学习总结记录，欢送学习交换。

一、展现

二、构思

1. video标签
2. JavaScript调整video的倍速播放

三、实现

1. video丑化：flex布局
2. 减少滑块元素：flex布局

3. 拖动滑块实现video的倍速播放：JavaScript

4. • 获取滑块的wrapper元素：下文的.speed选择器
   • 获取滑块元素：下文的.speed-bar选择器
   • 鼠标挪动到的坐标（y）间隔滑块wrapper的高度即为滑块的高度：下文的percent变量（height转化percent为百分比）

   • 当滑块高度发生变化时，视频的倍速跟着变动:

     外围逻辑：var playbackRate = percent * (max – min) + min    ——> 让计算出来的高度（小数）在指定的播放倍速区间内[0.4 ， 4]

     • (max – min)：倍速的增量，设定最小播放倍速为0.4，最大为4。
     • percent * (max – min)：高度（小数）的范畴在[0 ，3.6]之间
     • percent * (max – min) + min：高度（小数）的范畴加上最小值0.4后，能够取到高度（小数）的范畴在[0.4 ， 4]之间

1. 代码

2. • html局部

     <div class="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>

• css局部(flex)

  * {
      margin: 0;
      padding: 0;
    }
    body {
      background:#4c4c4c url('https://unsplash.it/1500/900?image=1021');
      /*笼罩整个容器*/
      background-size: cover;
      /* 最小高度：100视口 */
      min-height: 100vh;
      display: flex;
      justify-content: center;/* 沿主轴对齐（程度） */
      align-items: center;/* 沿穿插轴对其（垂直） */
    }
    .wrapper {
      /*居中的第一种写法*/
      /* position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
      width: 850px;
      display: flex;
    }
    /* .flex {
      设置在父容器设置了弹性布局后，子容器占父容器宽度多少比例，1为1份
      flex: 1;
    } */
    .speed {
      background-color: #ffffff;
      /* 父容器设置了display: flex;当子容器设置flex: 1;时，子容器会平均的继承父容器的高度 */
      flex: 1;
      /*父容器已定宽度，子容器设置外边距耗费父容器宽度，所以标签变小*/
      margin: 10px;
      border-radius: 50px;
      /* text-align: center; */
      display: flex;
      align-items: flex-start;
      overflow: hidden;
    }
    .speed-bar {
      /* width: 100%; */  /*width:100%;和flex: 1;能够调换*/
      flex: 1;
      height: 16.3%;
      display: flex;
      justify-content: center;
      align-items: center;
      /*线性突变: 从-170deg的地位，由0%高度的#2376ae变动到100%高度的#c16ecf*/
      /*角度从0开始，从第三个参数的色彩变动到第二个参数的色彩，正值顺时针，负值逆时针*/
      background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
      color: #fff;
      cursor: pointer;
    }

• JavaScript局部

  /*  1.拿到要操作的dom构造
  2.在这个dom上挪动鼠标能管制滑块的地位
  3.能管制这个dom的高度发生变化
  4.依据该dom高度的值来调整视频的播放速度
  */
  
  var speed = document.querySelector('.speed')
  var bar = document.querySelector('.speed-bar')
  var video = document.querySelector('.flex')
  
  /* 注册事件 */
  speed.addEventListener('mousemove', function(event) {
    // console.log(event);
    var y = event.pageY - speed.offsetTop
    var percent = y / speed.offsetHeight // 获取该dom构造本身的高度
    var min = 0.4
    var max = 4
    var height = Math.round(percent * 100) + '%'
    var playbackRate = percent * (max - min) + min /*使得式子呈现在0.4至4之间*/
    // console.log(percent + '+' + playbackRate);
    bar.style.height = height
    /*playbackRate播放速度 */
    video.playbackRate = playbackRate
    bar.textContent = playbackRate.toFixed(2) + 'x'
  
  })

四、总结

1. CSS局部

   • 元素程度垂直居中（给父元素增加flex布局）

     body {
       /* 最小高度：100视口 */
       min-height: 100vh;
       display: flex;
       justify-content: center;/* 沿主轴对齐（程度） */
       align-items: center;/* 沿穿插轴对其（垂直） */
     }

   • 父容器设置display: flex;子容器能够设置flex: 1;flex所取的数字示意按多少比例均等分父容器的宽度，例如1示意元素平分父容器宽度

     /* 父容器 */
     .wrapper {
       width: 850px;
       display: flex;
     }
     
     /* 子容器 */
      .flex {
       flex: 1;
     } 

   • align-items: flex-start;示意子元素垂直对齐形式为沿穿插轴顶部对齐
   • 当父容器设置display: flex;而子容器只有一个元素时，能够设置flex: 1;或width: 100%;来占据父容器的所有宽度

   • 渐变色的用法：linear-gradient

     /*线性突变: 从-170deg的地位，由0%高度的#2376ae变动到100%高度的#c16ecf*/
     
     /*角度从0开始，从第三个参数的色彩变动到第二个参数的色彩，正值顺时针，负值逆时针*/
     background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);

2. JavaScript局部

   • document.querySelector('类选择器')：获取dom中的指定类选择器的标签
   • addEventListener(‘事件’, 办法(事件参数))：为指定标签变量增加事件监听办法，监听事件，当事件产生时在办法中作对应操作
   • pageY：指定事件中元素的y轴坐标
   • offsetTop：元素间隔网页顶部的间隔
   • offsetHeight：元素本身的高度
   • 元素.style.height：设置元素款式的高度
   • playbackRate：video标签中管制倍速播放的属性
   • textContent：获取标签的内容