html自定义video播放器
本章的css可以说约等于没有，全是逻辑，仅供参考
html
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>
<div>
<video src="你的视频名称&路径.mp4"
id="myVideo" onclick="player()">video>
<div class="timeStyle">div>
div>
body>
<script src="index.js">script>
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:s
h = time / 60 / 60^0 //^0:四舍五入整数化
m = time / 60 % 60^0
s = time % 60 % 60^0
return h + ':' + m + ':' + s
}else { //小于一小时
//m:s
m = time / 60 % 60^0
s = time % 60 % 60^0
return m + ':' + s
}
}
即将播放事件函数(oncanplay)
本章只是配置时间和进度条，所以之后有的功能自行添加
//全局变量
//播放的时间元素标签获取,是个class
const 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)
这个事件在我们视频播放的时候就会被调用，停止视频后就不会调用
进度条显示
<div class="proessBox">
<div id="proess">div>
div>
//需要获取到的元素(全局常量)
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*****************,所以需要乘100
proess.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) //0
let len = event.pageX - proessBox.offsetLeft
let 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){
//左箭头:37
let 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 - 5
cTime = JiSuanHMS(myVideo.currentTime)
}
键盘右箭头的ascii码
event.keyCode显示是39
逻辑是时间不能大于视频的最大时间和点击键盘的右箭头前进5秒
if(event.keyCode === 39){
//右键头:39
let 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 + 5
cTime = 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>
<div>
<video src="http://124.223.18.34:5555/static/video/djsy/djsy1/djsy1_1.mp4"
id="myVideo" onclick="player()">video>
<div class="timeStyle">div>
<div class="proessBox">
<div id="proess">div>
div>
div>
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")//video
const timeStyle = document.querySelector(".timeStyle")//time
const 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:s
h = time / 60 / 60^0
m = time / 60 % 60^0
s = time % 60 % 60^0
return h + ':' + m + ':' + s
}else {
//m:s
m = time / 60 % 60^0
s = time % 60 % 60^0
return 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*****************,所以需要乘100
proess.style.width = myVideo.currentTime/myVideo.duration*100 + '%'
}
/* proess.onmousemove = function(event) {
event = event || window.event
console.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) //0
let len = event.pageX - proessBox.offsetLeft
let 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){
//左箭头:37
let 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 - 5
cTime = JiSuanHMS(myVideo.currentTime)
}
if(event.keyCode === 39){
//右键头:39
let 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 + 5
cTime = JiSuanHMS(myVideo.currentTime)
}
}
目前先到这个定义吧