html自定义video播放器

时间：2021-10-13 01:19:15

本章的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 = `<div>${cTime}/${allTime}</div>` //写入元素
}

暂停后将即将播放事件函数(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 = `<div>${cTime}/${allTime}</div>`
    },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 = `<div>${cTime}/${allTime}</div>`
}

//暂停后将即将播放事件函数
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 = `<div>${cTime}/${allTime}</div>`
    },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)
    }


}

目前先到这个定义吧

标签：

相关文章