关于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：获取标签的内容