原生js實現改變視頻播放速率
前言：前幾天考研成績剛剛出來，有人歡喜有人悲，不管結果怎麼樣，只要努力過，就不存在遺憾一說。大家都知道考研複習的時候會有大量的時間用來看教學視頻，就比如說「張宇高數」等等。考研複習時間是非常珍貴的，所以有些同學就會選擇倍速播放視頻，一次來節約時間，今天我們就來簡單的實現一下視頻倍速播放。
我的更多文章請參考：
天之藍源：前端開發者必備的40個VSCode插件！
天之藍源：三分鐘在GitHub上搭建個人博客
天之藍源：零基礎Hexo+Github搭建靜態個人博客
天之藍源：原生js實現點擊按鈕複製文本內容
天之藍源：九種跨域方式實現原理
天之藍源：前端面試考點多？看這些文章就夠了（轉載）
天之藍源：乾貨！值得收藏的前端學習網站
天之藍源：原生JS實現一個日期選擇器（DatePicker）組件
天之藍源：原生js一步一步實現《別踩白塊兒》小遊戲
天之藍源：原生js利用localstorage實現簡易TODO list應用
天之藍源：原生js實現瀑布流效果
天之藍源：原生js實現圖片懶載入（lazyLoad）
天之藍源：原生js實現簡單路由切換
實現效果：
視頻倍速播放
一.HTML代碼
可以看到我們的代碼很簡單，就一個外層容器wrapper，然后里面有一個H5的video標籤，然後一個控制倍速的容器speed。
<body>
<div class="wrapper">
<video class="flex" width_="765" height="430" src="./新聞.mp4" loop controls></video>
<div class="speed">
<div class="speed-bar">1×</div>
</div>
</div>
</body>
二.設置點樣式——CSS
我們的樣式也是寫得很簡單，裡面用到了flex布局和vh布局，不太熟悉的小夥伴可以參考：
Flex 布局教程：語法篇 - 阮一峰的網路日誌
https://blog.csdn.net/ZNYSYS520/article/details/76053961<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-size: cover;
font-family: sans-serif;
}
.wrapper {
width: 850px;
display: flex;
}
video {
box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);
}
.speed {
background: #efefef;
flex: 1;
display: flex;
align-items: flex-start;
margin: 10px;
border-radius: 50px;
box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.speed-bar {
width: 100%;
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;//分別設置居中和垂直居中
justify-content: center;
padding: 2px;
color: white;
height: 16.3%;
}
此時我們頁面部分已進基本完成了，有沒有發現HTML5的video標籤很好用呢，這裡我們默認的是x1速率：
三.加上JavaScript實現倍速播放
關於pageY,W3C上是這樣解釋的：
關於pageY,offsetTop等使用方法可以參考文章：
event.pageY
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
https://blog.csdn.net/nideshijian/article/details/52453074另外設計到的video的屬性可以參考：
HTML 5 Audio/Video DOM playbackRate 屬性<script>
// 獲取三個元素
const speed = document.querySelector(.speed);
const bar = speed.querySelector(.speed-bar);
const video = document.querySelector(.flex);
function handleMove(e) {
const y = e.pageY - this.offsetTop;//獲取滑鼠現在位置在速率框中的位置
const percent = y / this.offsetHeight;
const min = 0.4;//設置最小速率為0.4
const max = 4;//設置最小速率為4
const height = Math.round(percent * 100) + %;//取整
const playbackRate = percent * (max - min) + min;
bar.style.height = height;//設置顯示高度
bar.textContent = playbackRate.toFixed(2) + ×;
video.playbackRate = playbackRate;//通過playbackRate屬性改變播放速率
}
// 給滑鼠添加移動事件
speed.addEventListener(mousemove, handleMove);
</script>
代碼是非常簡單的，裡面是涉及到了少部分API之類的，看一看注釋就能馬上懂，就不做過多解釋，裡面用到了ES6的命名方式，學習ES6請參考：
ECMAScript 6入門四.總結
總體來說代碼是非常簡單了，主要的目的就是讓大家了解一下HMTL5中的video標籤，關於video標籤更多的屬性請自行去了解了。
歡迎關注微信公眾號：前端切圖仔
五.源代碼
Hacker233/JavaScript
文章參考地址：
liyuechun/JavaScript30-liyuechun
推薦閱讀：
