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

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

一、展现

二、构思

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

一、展现

二、构思

三、实现

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

四、总结

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