視頻倍速播放——flex佈局+JavaScript

時間 2020-12-13

標籤 javascript css html html5 java app dom ide 佈局學習欄目 Flex 简体版

原文原文鏈接

本案例爲課上學習成果，該文章僅做爲學習總結記錄，歡迎學習交流。

1、展現

2、構思

video標籤
JavaScript調整video的倍速播放

3、實現

video美化：flex佈局
增長滑塊元素：flex佈局
拖動滑塊實現video的倍速播放：JavaScriptjavascript
- 獲取滑塊的wrapper元素：下文的.speed選擇器
- 獲取滑塊元素：下文的.speed-bar選擇器
- 鼠標移動到的座標（y）距離滑塊wrapper的高度即爲滑塊的高度：下文的percent變量（height轉化percent爲百分比）
- 當滑塊高度發生變化時，視頻的倍速跟着變化:css
  核心邏輯：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

html部分html5

<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)java

* {
    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部分app

/*  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'

})

4、總結

CSS部分dom

元素水平垂直居中（給父元素添加flex佈局）ide

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：獲取標籤的內容