html自定义video播放器

发布时间：2025-12-09 16:11:09 浏览次数：13

本章的css可以说约等于没有，全是逻辑，仅供参考

html

首先你要获取到video元素

//全局变量const myVideo = document.getElementById("myVideo")//video,获取到的是元素标签信息

播放&暂停

这是一个点击事件,函数名为player

const player = () => {if(myVideo.paused){myVideo.play() //播放}else {myVideo.pause() //暂停}}

时间格式化函数

这是一个函数,函数名为JiSuanHMS

const JiSuanHMS = (time) => {if(time >= 60 * 60 *60){ // 大于一小时//h:m:sh = time / 60 / 60^0 //^0:四舍五入整数化m = time / 60 % 60^0s = time % 60 % 60^0return h + ':' + m + ':' + s}else { //小于一小时//m:sm = time / 60 % 60^0s = time % 60 % 60^0return m + ':' + s}}

即将播放事件函数(oncanplay)

本章只是配置时间和进度条，所以之后有的功能自行添加

//全局变量//播放的时间元素标签获取,是个classconst timeStyle = document.querySelector(".timeStyle")//time 获取视频总时间 video.duration //是一个浮点类型获取视频当前时间 video.currentTime//是一个浮点类型 myVideo.oncanplay = () => {const allTime = JiSuanHMS(myVideo.duration)const cTime = JiSuanHMS(myVideo.currentTime)timeStyle.innerHTML = `${cTime}/${allTime}` //写入元素}

暂停后将即将播放事件函数(onplaying)

我们这里先不做任何处理(你可以不写)

myVideo.onplaying = () => {//就是暂停后要播放时会调用// console.log('test')// console.log(myVideo.duration)}

播放时事件函数(onplay )

这个事件是在我们播放视频时调用。我们这里只是定义了一个定时器，每一秒去读取当前视频时间(currentTime)的值，至于总时间(duration)因为是innerHTML 重写，所以也要加上去

//定时器定义与初始值let inter = null //全局变量 myVideo.onplay = () => {inter = setInterval(()=>{const allTime = JiSuanHMS(myVideo.duration)const cTime = JiSuanHMS(myVideo.currentTime)timeStyle.innerHTML = `${cTime}/${allTime}`},1000)}

暂定时事件函数(onpause )

这个事件是在我们暂停视频时调用。这里我们的逻辑是暂停时我们取消定时器(停止获取)

myVideo.onpause = () => {console.log('pause')clearInterval(inter)inter = null}

视频时间更新事件函数(ontimeupdate)

这个事件在我们视频播放的时候就会被调用，停止视频后就不会调用

进度条显示

//需要获取到的元素(全局常量)const proess = document.getElementById('proess') //进度条元素

duration和currentTime的定义

myVideo.ontimeupdate = () => {// console.log('duration:',myVideo.duration)// console.log('currentTime:',myVideo.currentTime)//console.log(myVideo.currentTime/myVideo.duration)//0.00*****************,所以需要乘100proess.style.width = myVideo.currentTime/myVideo.duration*100 + '%'} .proessBox{/*进度条全貌*/position: absolute;left: 0;top: 520px;width: 300px;height: 15px;background-color: red;display: flex;z-index: -1;/*最底*/}#proess{position: absolute;left: 0;top: 0;height: 100%;background-color: skyblue;z-index: 5;/*比proessBox高一些的*/}

进度条拖拽

//proessBox是进度条的父级//onmousedown: 鼠标点击事件proessBox.onmousedown = (event)=>{// console.log('event:',event.pageX) //关键// console.log('proess.clientWidth',proess.clientWidth)// console.log('proess.clientHeight:',proess.clientHeight)// console.log('proessBox.offsetWidth:',proessBox.offsetWidth)// console.log('proessBox.offsetHeight:',proessBox.offsetHeight)// console.log('proessBox:',proessBox.offsetLeft) //0let len = event.pageX - proessBox.offsetLeftlet percent = len / proessBox.offsetWidth;// console.log(percent)proess.style.width = percent * (proessBox.offsetWidth) - 2 + "px";myVideo.currentTime = percent * myVideo.duration;}

追加: 键盘事件

onkeydown: 键盘被按下
onkeyup: 松开键盘的按键

重点是keyCode

使用的事件是window.onkeyup()

键盘空格键的ascii码

event.keyCode显示是32

if(event.keyCode === 32){//空格按下//播放暂停逻辑if(myVideo.paused){myVideo.play()}else {myVideo.pause()}}

键盘左箭头的ascii码

event.keyCode显示是37

逻辑是时间不能小于0和点击键盘的左箭头回退5秒

if(event.keyCode === 37){//左箭头:37let cTime = JiSuanHMS(myVideo.currentTime)if(myVideo.currentTime < 0){//if(cTime < '0:5'){//cTime小于5秒(myVideo.currentTime或者不能小于0)console.log(cTime)return}const returnTime = JiSuanHMS(myVideo.currentTime - 5)console.log('左箭头:',cTime,'returnTime:',returnTime)myVideo.currentTime = myVideo.currentTime - 5cTime = JiSuanHMS(myVideo.currentTime)}

键盘右箭头的ascii码

event.keyCode显示是39

逻辑是时间不能大于视频的最大时间和点击键盘的右箭头前进5秒

if(event.keyCode === 39){//右键头:39let cTime = JiSuanHMS(myVideo.currentTime)let allTime = JiSuanHMS(myVideo.duration)if(myVideo.currentTime > myVideo.duration){//大于最大值console.log('cTime:',cTime,'allTime:',allTime)return}const addTime = JiSuanHMS(myVideo.currentTime + 5)console.log('右箭头:',myVideo.currentTime,'addTime:',addTime)myVideo.currentTime = myVideo.currentTime + 5cTime = JiSuanHMS(myVideo.currentTime)}

完整代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频</title><link rel="stylesheet" href="index.css" /></head><body><video src="http://124.223.18.34:5555/static/video/djsy/djsy1/djsy1_1.mp4" id="myVideo" onclick="player()"></video></body><script src="index.js"></script></html> .proessBox{position: absolute;left: 0;top: 520px;width: 900px;height: 15px;background-color: red;display: flex;z-index: -1;}#proess{position: absolute;left: 0;top: 0;height: 100%;background-color: skyblue;z-index: 5;} const myVideo = document.getElementById("myVideo")//videoconst timeStyle = document.querySelector(".timeStyle")//timeconst proessBox = document.querySelector('.proessBox') //进度条元素const proess = document.getElementById('proess') //进度条元素let inter = null //定时器变量window.onload = () => {// console.log(myVideo)}const player = () => {if(myVideo.paused){myVideo.play()}else {myVideo.pause()}}//时间格式化函数(自定义)const JiSuanHMS = (time) => {if(time >= 60 * 60 *60){//h:m:sh = time / 60 / 60^0m = time / 60 % 60^0s = time % 60 % 60^0return h + ':' + m + ':' + s}else {//m:sm = time / 60 % 60^0s = time % 60 % 60^0return m + ':' + s}}//即将播放事件函数myVideo.oncanplay = () => {const allTime = JiSuanHMS(myVideo.duration)const cTime = JiSuanHMS(myVideo.currentTime)timeStyle.innerHTML = `${cTime}/${allTime}`}//暂停后将即将播放事件函数myVideo.onplaying = () => {// console.log('test')// console.log(myVideo.duration)}//播放时事件函数myVideo.onplay = () => {inter = setInterval(()=>{const allTime = JiSuanHMS(myVideo.duration)const cTime = JiSuanHMS(myVideo.currentTime)timeStyle.innerHTML = `${cTime}/${allTime}`},1000)}//暂定时事件函数myVideo.onpause = () => {console.log('pause')clearInterval(inter)inter = null}//视频时间更新事件函数myVideo.ontimeupdate = () => {// console.log('duration:',myVideo.duration)// console.log('currentTime:',myVideo.currentTime)//console.log(myVideo.currentTime/myVideo.duration)//0.00*****************,所以需要乘100proess.style.width = myVideo.currentTime/myVideo.duration*100 + '%'}/* proess.onmousemove = function(event) {event = event || window.eventconsole.log('clientWidth:',event.clientWidth)console.log('clientHeight',event.clientHeight)} */proessBox.onmousedown = (event)=>{// console.log('event:',event.pageX) //关键// console.log('proess.clientWidth',proess.clientWidth)// console.log('proess.clientHeight:',proess.clientHeight)// console.log('proessBox.offsetWidth:',proessBox.offsetWidth)// console.log('proessBox.offsetHeight:',proessBox.offsetHeight)// console.log('proessBox:',proessBox.offsetLeft) //0let len = event.pageX - proessBox.offsetLeftlet percent = len / proessBox.offsetWidth;// console.log(percent)proess.style.width = percent * (proessBox.offsetWidth) - 2 + "px";myVideo.currentTime = percent * myVideo.duration;}//定义键盘事件window.onkeyup = (event) => {console.log(event.keyCode) //按键的ascii码值if(event.keyCode === 32){//空格按下//播放暂停逻辑if(myVideo.paused){myVideo.play()}else {myVideo.pause()}}if(event.keyCode === 37){//左箭头:37let cTime = JiSuanHMS(myVideo.currentTime)if(myVideo.currentTime < 0){//小于5秒console.log(cTime)return}const returnTime = JiSuanHMS(myVideo.currentTime - 5)console.log('左箭头:',cTime,'returnTime:',returnTime)myVideo.currentTime = myVideo.currentTime - 5cTime = JiSuanHMS(myVideo.currentTime)}if(event.keyCode === 39){//右键头:39let cTime = JiSuanHMS(myVideo.currentTime)let allTime = JiSuanHMS(myVideo.duration)if(myVideo.currentTime > myVideo.duration){//大于最大值console.log('cTime:',cTime,'allTime:',allTime)return}const addTime = JiSuanHMS(myVideo.currentTime + 5)console.log('右箭头:',myVideo.currentTime,'addTime:',addTime)myVideo.currentTime = myVideo.currentTime + 5cTime = JiSuanHMS(myVideo.currentTime)}}

目前先到这个定义吧

上一篇：NETBIOS是什么？下一篇：客户端就是app吗 app和客户端是不是一个概念？

知识问答