<template>
<div style="height: 100vh;">
<video ref="vid" width='1000px' height='560px'>
<source src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/97ac2dcc1367e03ac580204d6ca9a724.mp4" />
</video>
<div class="jdt">
<div class="jd" ref="jdt">
<div style="background-color: green;height: 100%;border-radius: 8px;"
:style="`width: ${currentTime / duration * 1000}px`">
</div>
</div>
</div>
<div class="vid">
<i :class="play" @click="changePlay"></i>
<svg @click="back" t="1677726468265" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2790" width="36" height="36">
<path
d="M0 512c0 282.8 229.2 512 512 512s512-229.2 512-512S794.8 0 512 0 0 229.2 0 512z m99.2 174.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4 41.2-41.2 89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64s119.2 11.8 174.4 35.2c53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4z"
p-id="2791" fill="#ffffff"></path>
<path
d="M256 305.3v413.3c0 6.8 8 10.5 13.2 6.1L473.1 551v167.7c0 6.8 8 10.5 13.2 6.1L720 525.6V704h64V320h-64v178.4L486.3 299.2c-5.2-4.4-13.2-0.7-13.2 6.1V473L269.2 299.2c-5.2-4.4-13.2-0.7-13.2 6.1z"
p-id="2792" fill="#ffffff"></path>
</svg>
<svg @click="fast" t="1677726468265" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2790" width="36" height="36">
<path
d="M0 512c0 282.8 229.2 512 512 512s512-229.2 512-512S794.8 0 512 0 0 229.2 0 512z m99.2 174.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4 41.2-41.2 89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64s119.2 11.8 174.4 35.2c53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4z"
p-id="2791" fill="#ffffff"></path>
<path
d="M256 305.3v413.3c0 6.8 8 10.5 13.2 6.1L473.1 551v167.7c0 6.8 8 10.5 13.2 6.1L720 525.6V704h64V320h-64v178.4L486.3 299.2c-5.2-4.4-13.2-0.7-13.2 6.1V473L269.2 299.2c-5.2-4.4-13.2-0.7-13.2 6.1z"
p-id="2792" fill="#ffffff"></path>
</svg>
<el-select v-model="second" @change="changeSecond">
<el-option v-for="item in options" :key="item" :label="item" :value="item">
</el-option>
</el-select>
<i class="el-icon-caret-left" @click="zplay(1)"></i>
<i class="el-icon-caret-right" @click="zplay(2)"></i>
<i :class="volume" @click="changeVolume"></i>
</div>
</div>
</template>
<script>
var zzht, zzqj
export default {
data() {
return {
vid: "",
play: "el-icon-video-play",
isPlay: false, // true播放 false 暂停
duration: "", // 视频总时长
second: 1, // 默认1秒
options: [0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 16, 32],
currentTime: 0,
volume: "el-icon-microphone",
haveVoice: true, // 有声音
}
},
mounted() {
this.vid = this.$refs.vid // 获取video dom
setTimeout(() => {
this.duration = this.vid.duration
setInterval(() => {
this.currentTime = this.vid.currentTime
}, 1000)
}, 300)
},
methods: {
// 调节音量 我的音量只有100跟0别问 问就是懒
changeVolume(){
this.haveVoice = !this.haveVoice
if (this.haveVoice){ // 为true有声音 直接拉到100 别问 问就是懒
this.volume = "el-icon-microphone"
this.vid.volume = 100
} else { // 为false就是声音 直接干到0
this.volume = "el-icon-turn-off-microphone"
}
},
// 逐帧倒放 / 前近
zplay(val) {
this.vid.pause()
clearInterval(zzqj) // 清除倒放
clearInterval(zzht) // 清除逐帧倒放
zzht = setInterval(() => {
if (val == 1) { // 倒放
this.vid.currentTime -= 1 / 12
} else if (val == 2) { // 前近
this.vid.currentTime += 1 / 12
}
}, 1000)
},
// 变速
changeSecond() {
this.vid.playbackRate = this.second
},
// 倒放
back() {
clearInterval(zzqj) // 清除倒放
clearInterval(zzht) // 清除逐帧倒放
zzqj = setInterval(() => {
this.vid.currentTime -= 1 / 12
}, 100)
},
// 快进10秒
fast() {
this.vid.currentTime += 10
},
// 播放暂停
changePlay() {
this.isPlay = !this.isPlay
if (this.isPlay) {
// 如果为播放 将图标改为暂停 视频播放
this.play = "el-icon-video-pause"
this.vid.play()
} else {
// 如果为暂停 将图标改为播放 视频暂停
this.play = "el-icon-video-play"
this.vid.pause()
}
}
}
}
</script>
<style scoped>
.jd {
width: 1000px;
border-radius: 8px;
background-color: #fff;
height: 10px;
cursor: pointer;
}
.jdt {
background-color: black;
width: 1000px;
height: 30px;
display: flex;
align-items: center;
}
.vid {
background-color: black;
width: 1000px;
height: 80px;
display: flex;
align-items: center;
}
.vid i,
.vid svg {
font-size: 40px;
cursor: pointer;
color: #fff;
margin-right: 10px;
}
.vid i:hover,
.vid svg:hover {
color: #9bc9fd;
}
</style>这是我昨天研究写的一个demo，功能不完全，也不想加，大致都搞明白了，上面是全部代码
样式如下
UI 图懒得去找 大致讲解一下
倒放 浏览器端是不支持的 但是用定时器一秒触发12每次到1帧 这样写法也很离谱了
倍速播放 浏览器端 最大支持16倍 速播放 在大0.1都报错
进度条 如果要做点击拖动的话 就绑定一个点击事件 跟滑动事件 得到e 然后算法：
当前点击的横坐标 / 外部进度条的宽 * 视频总时长 就得到了当前点击或滑动的进度条width了
其他的就没上么好注意的了