视频倍速播放——flex布局+JavaScript(max - min)：倍速的增量，设定最小播放倍速为0.4，最大为4

本案例为课上学习成果，该文章仅作为学习总结记录，欢迎学习交流。

一、展示

二、构思

video标签
JavaScript调整video的倍速播放

三、实现

video美化：flex布局
增加滑块元素：flex布局
拖动滑块实现video的倍速播放：JavaScript
- 获取滑块的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]**之间

代码

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'

})

四、总结

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%);

JavaScript部分
- document.querySelector('类选择器')：获取dom中的指定类选择器的标签
- addEventListener(‘事件’, 方法(事件参数))：为指定标签变量添加事件监听方法，监听事件，当事件发生时在方法中作对应操作
- pageY：指定事件中元素的y轴坐标
- offsetTop：元素距离网页顶部的距离
- offsetHeight：元素自身的高度
- 元素.style.height：设置元素样式的高度
- playbackRate：video标签中控制倍速播放的属性
- textContent：获取标签的内容

视频倍速播放——flex布局+JavaScript

一、展示

二、构思

三、实现

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

四、总结

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