html自定义video播放器

结城明日奈是我老婆

已于 2023-04-16 21:25:00 修改

阅读量924

点赞数 3

分类专栏： html学习专栏文章标签： html javascript 前端

于 2023-04-02 15:19:20 首次发布

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/129907859

版权

html学习专栏专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本章的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)
}

视频全屏

<div class="QuanPinStyle">
  <button onclick="QuanPing()">全屏</button>
</div>

.QuanPinStyle{
    position: absolute;
    left: 0;
    top: 60%;
}

const QuanPing = () => {
    if(myVideo.requestFullscreen){
        myVideo.requestFullscreen()
    }else if(myVideo.webkitRequestFullscreen){
    //ios全屏
        myVideo.webkitRequestFullscreen()
    }else {
        myVideo.webkitEnterFullscreen()
        let timer = setInterval(()=>{
            if(!myVideo.webkitDisplayingFullscreen){
                clearInterval(timer)
            }
        },1000)
    }
}

自定义全屏样式

第一种

<video src="http://124.223.18.34:5555/static/video/gdyg/gdyg12.mp4" 
        id="myVideo" onclick="player()" 
        controlsList="nofullscreen noplaybackrate nodownload"
        disablePictureInPicture></video>

nodownload: 不要下载按钮
nofullscreen: 不要全屏按钮
noremoteplayback: 不要远程回放
disablePictureInPicture : 禁止画中画按钮
noplaybackrate : 不要播放速度按钮

但解决不了根本自定义样式问题

查看shadow DOM

在这里插入图片描述

勾选显示用户代理阴影DOM

第二种方法(推荐)

/*隐藏全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
    display: none;
}

没有全屏键

/* 播放按钮*/
video::-webkit-media-controls-play-button {
  display: none !important;
}
/* 当前播放时间*/
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
/*剩余时间*/
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
/*音量按钮*/
video::-webkit-media-controls-volume-control-container {
  display: none !important;
}
/*全屏*/
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
/*时间轴*/
video::-webkit-media-controls-timeline {
  display: none !important;
}
/*更多选项 --然而并不生效*/
video::-internal-media-controls-overflow-button {
  display: none !important;
}

可以，但是全隐藏后，之前的播放器的阴影样式还在。而且不能用之前播放器自带的点击事件

样式还在，如果有字幕则挡住看字幕(当然播放器的点击事件是不行的)

所以去掉全屏时显示的自带控制条是最优选

/* 去掉全屏时显示的自带控制条 */
video::-webkit-media-controls {
    display: none !important;
}

现在全屏后的一些问题可以暂时用之前写的全局键盘事件来解决

编写样式(现在只能改变视频的样式)

video:fullscreen{
    background-color: white;
}

全屏样式修改

追加: 添加音乐

<!--src里的内容会失效，请自行添加;  wbhwj.mp3:我不会忘记.mp3-->
<audio src="http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3" id="myAudio"></audio>

//DOM元素
const myAudio = document.getElementById('myAudio')

添加点击事件控制音频

<button onclick="mp3Player()" class="mp3PlayStyle">播放音乐</button>

//音频播放按键
const mp3Player = () => {
    myVideo.pause() //取消视频播放
    if(myAudio.paused){
        myAudio.play() //音频播放
    }else {
        myAudio.pause()
    }
}

视频播放器追加

myVideo.onplay = () => {
    inter = setInterval(()=>{
        const allTime = JiSuanHMS(myVideo.duration)
        const cTime = JiSuanHMS(myVideo.currentTime)
        timeStyle.innerHTML = `<div>${cTime}/${allTime}</div>`
    },1000)
    //追加
    myAudio.pause()
}

通过按键来触发切换歌曲

//控制的变量
let num = 0
let audioArray = [
    "mp3文件地址",
    "mp3文件地址",
    ...
]

可以参考这个。上箭头的keyCode是38,下箭头的是40,回车键是13

if(event.keyCode === 38){
  //上箭头:38
  if(num <= 0){
    return
  }
  num--
  myAudio.src = audioArray[num]
}
if(event.keyCode === 40){
  //下箭头: 40
  if(num > 1){
    return
  }
  num++
  myAudio.src = audioArray[num]
}

通过视频进度来触发

//音频播放按键
const mp3Player = () => {
    console.log('mp3:',myAudio.paused)
    if(myVideo.currentTime < 220){
        myAudio.src = "http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3"
    }else {
        myAudio.src = "http://124.223.18.34:5555/static/mp3/gdyg/rgwnbcxz.mp3"
    }
    myVideo.pause()
    myVideoMini.pause()
    if(myAudio.paused){
        myAudio.play()
    }else {
        myAudio.pause()
    }
    // console.log(myAudio.src)
    
}

有个BUG: 就是点击一直重复播放，不会暂停，请配合自己的视频点击来暂停

播放图标(包括小窗图标)

以下是svg图片的源码

<!--播放-->
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <polygon id="cd9e036b-17ed-4fb1-988d-92dd0e62df02" points="0 0 80 0 80 80 0 80"></polygon>
        <path id="e9029cf2-058b-4dc3-a369-191aaec4988d" d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,13.2595235 C48.2367415,12.266226 48.9249622,11.289246 49.6299296,10.3244467 L49.6299296,10.3244467 L50.1626124,9.60371998 L50.4314773,9.24519521 C50.5211754,9.12568695 50.6099559,9.00548922 50.7122714,8.89540373 C50.9162141,8.67408363 51.1596148,8.48195113 51.4537145,8.32682022 C51.7507964,8.1735279 52.0912362,8.05195123 52.5463795,8.01403034 Z M30.1292787,34.6305448 C29.9027436,35.0737419 29.7609153,35.5553261 29.7110787,36.0505615 C29.4138374,39.0042999 29.2652168,42.0471726 29.2652168,45.1791797 C29.2652168,48.0068864 29.3863609,50.8345931 29.6286492,53.6622998 L29.7399083,54.8741737 C29.9552063,57.072794 31.9120739,58.6805944 34.1106942,58.4652963 C34.6308013,58.4143652 35.1358879,58.2620098 35.597405,58.0168417 C38.4166275,56.5192079 41.1473744,54.9840008 43.7896457,53.4112203 C45.7989419,52.2152106 47.7645435,50.9930278 49.6864507,49.7446716 L51.1196851,48.8034922 C52.9601471,47.5816163 53.4616102,45.0991009 52.2397342,43.2586389 C51.9555036,42.830514 51.5914399,42.4611683 51.1674532,42.1708009 C48.8122631,40.5578484 46.3529939,38.9884709 43.7896457,37.4626684 C41.5302725,36.1178034 39.2374735,34.835025 36.9112487,33.6143333 L35.5115044,32.8893654 C33.5444304,31.8839182 31.1347259,32.6634708 30.1292787,34.6305448 Z"></path>
        <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="0bb3e1ae-f6c9-4254-a22a-e753c086e5a8">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
            <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
        <mask id="ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a" fill="white">
            <use xlink:href="#cd9e036b-17ed-4fb1-988d-92dd0e62df02"></use>
        </mask>
        <g mask="url(#ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a)">
            <use fill="black" fill-opacity="1" filter="url(#0bb3e1ae-f6c9-4254-a22a-e753c086e5a8)" xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"></use>
            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"></use>
        </g>
    </g>
</svg>

<!--暂停-->
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <polygon id="dcacc03d-ebe2-486b-86c6-02f40070ed49" points="0 0 80 0 80 80 0 80"></polygon>
        <path d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,13.2595235 C48.2367415,12.266226 48.9249622,11.289246 49.6299296,10.3244467 L49.6299296,10.3244467 L50.1626124,9.60371998 L50.4314773,9.24519521 C50.5211754,9.12568695 50.6099559,9.00548922 50.7122714,8.89540373 C50.9162141,8.67408363 51.1596148,8.48195113 51.4537145,8.32682022 C51.7507964,8.1735279 52.0912362,8.05195123 52.5463795,8.01403034 Z M31.696446,30.297619 L31.2868885,30.297619 C29.6980674,30.297619 28.3672791,31.5005773 28.2073671,33.0813305 C27.8913446,36.2053322 27.7333333,40.178222 27.7333333,45 C27.7333333,49.8217759 27.8913444,53.7946643 28.2073667,56.9186655 C28.367275,58.4994206 29.6980646,59.7023801 31.2868873,59.702381 L31.2868873,59.702381 L31.6964448,59.702381 C33.2852659,59.702381 34.6160542,58.4994227 34.7759663,56.9186695 C35.0919888,53.7946678 35.25,49.821778 35.25,45 C35.25,40.1782241 35.0919889,36.2053357 34.7759667,33.0813345 C34.6160584,31.5005794 33.2852687,30.2976199 31.696446,30.297619 L31.696446,30.297619 Z M48.7131127,30.297619 L48.3035552,30.297619 C46.7147341,30.297619 45.3839458,31.5005773 45.2240337,33.0813305 C44.9080112,36.2053322 44.75,40.178222 44.75,45 C44.75,49.8217759 44.9080111,53.7946643 45.2240333,56.9186655 C45.3839416,58.4994206 46.7147313,59.7023801 48.303554,59.702381 L48.303554,59.702381 L48.7131115,59.702381 C50.3019326,59.702381 51.6327209,58.4994227 51.7926329,56.9186695 C52.1086554,53.7946678 52.2666667,49.821778 52.2666667,45 C52.2666667,40.1782241 52.1086556,36.2053357 51.7926333,33.0813345 C51.632725,31.5005794 50.3019354,30.2976199 48.7131127,30.297619 L48.7131127,30.297619 Z" id="271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></path>
        <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
            <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.800000012">
        <g transform="translate(-674.000000, -832.000000)">
            <g transform="translate(514.000000, 759.000000)">
                <g transform="translate(160.000000, 73.000000)">
                    <mask id="6571edcb-5f96-450a-80cd-4185b762ee4d" fill="white">
                        <use xlink:href="#dcacc03d-ebe2-486b-86c6-02f40070ed49"></use>
                    </mask>
                    <g mask="url(#6571edcb-5f96-450a-80cd-4185b762ee4d)">
                        <use fill="black" fill-opacity="1" filter="url(#6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb)" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

<!--小窗图标-->
<div id="playImageStyleMini" onclick="miniClick()">
  <img src="./play.svg" alt="" id="miniplay" />
</div>

#playImageStyleMini {
    position: fixed;
    left: 78%;
    top: 79%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: none;
}

const playImageStyle = document.getElementById('playImageStyle')//图片
const playImageStyleMini = document.getElementById('playImageStyleMini')
const miniplay = document.getElementById('miniplay')

myVideoMini.onplay = () => {
    miniplay.src = "./pause.svg"
}
myVideoMini.onpause = () => {
    miniplay.src = "./play.svg"
}

//window全局滚动事件
let numWheel = 0
window.onmousewheel = async(event) => {
    event = event||window.event;
    console.log(event)
    //event.wheelDelta 可以获取鼠标滚轮滚动的方向
    // console.log(event.wheelDelta)
    numWheel -= await event.wheelDelta
    console.log(numWheel)
    if(numWheel <0){
        numWheel = await 0
    }else if(numWheel >= 2550){
        numWheel = 2550
    }
    if(numWheel >= 600){
        miniWin.style.display = 'block'
        //追加
        playImageStyleMini.style.display = 'block'
    }else {
        miniWin.style.display = 'none'
        //追加
        playImageStyleMini.style.display = 'none'
    }
}

//小窗
myVideo.onplaying = () => {
    playImageStyle.style.display = 'none'
}
myVideoMini.onmouseenter = () => {
    miniplay.style.display = 'block'
}
myVideoMini.onmouseleave = () => {
    miniplay.style.display = 'none'
}
playImageStyleMini.onmouseenter = () => {
    miniplay.style.display = 'block'
}
playImageStyleMini.onmouseleave = () => {
    miniplay.style.display = 'none'
}

要是按键也需要追加，那照上追加代码追加

取消的标签属性

<div class="closeMini">
  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" data-pointer="none" viewBox="0 0 16 16">
    <path d="m8 6.939 3.182-3.182a.75.75 0 1 1 1.061 1.061L9.061 8l3.182 3.182a.75.75 0 1 1-1.061 1.061L8 9.061l-3.182 3.182a.75.75 0 1 1-1.061-1.061L6.939 8 3.757 4.818a.75.75 0 1 1 1.061-1.061L8 6.939z"></path>
  </svg>
</div>

自定义小窗

<!--先以最简单的按键的形式去编写-->
<button onclick="openWin()">点击</button>
<div class="mini-win" id="miniWin">
  <video src="http://124.223.18.34:5555/static/video/gdyg/gdyg12.mp4" id="myVideo"></video>
</div>
<!--以下只是测试小窗是否一直在一个位置-->
<div class="testStyleMini"></div>

/*小窗*/
.mini-win{
    position: fixed;
    left: 70%;
    top: 65%;
    width: 300px;
    height: 250px;
    display: none;
}
.mini-win video{
    width: 100%;
    height: 100%;
}
/*测试小窗*/
.testStyleMini{
    width: 900px;
    height: 2000px;
    background-color: greenyellow;
}

这样写虽可以但是，俩个video还是分开的

视频和小窗视频同步

<!--进度条元素
<div class="proessBox">
  <div id="proess"></div>
</div>
-->
<div class="mini-win" id="miniWin">
  <video src="http://124.223.18.34:5555/static/video/gdyg/gdyg12.mp4" id="myVideoMini"  onclick="miniClick()"></video>
</div>

//DOM元素
const miniWin = document.getElementById('miniWin')//小窗元素
const myVideoMini = document.getElementById('myVideoMini')//video小窗元素

//1. 点击进度条跟视频一样的位置
//想法是既然出自同一个视频那么视频时长和位置都一致所以,找到进度条变化的位置
proessBox.onmousedown = (event)=>{
    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;
	//追加
    myVideoMini.currentTime = percent * myVideoMini.duration;
}

视频'同步'点击

//视频点击事件
const player = () => {
    if(myVideo.paused){
        myVideo.play()
        //追加
        myVideoMini.play()
    }else {
        myVideo.pause()
        //追加
        myVideoMini.pause()
    }
}
//小窗点击事件
const miniClick = () => {
    if(myVideoMini.paused){
        myVideo.play()
        myVideoMini.play()
    }else {
        myVideo.pause()
        myVideoMini.pause()
    }
}

修改键盘事件

if(event.keyCode === 32){
  //空格按下
  //播放暂停逻辑
  if(myVideo.paused){
    myVideo.play()
  }else {
    myVideo.pause()
  }
  if(myVideoMini.paused){
    myVideo.play()
    myVideoMini.play()
  }else {
    myVideo.pause()
    myVideoMini.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;
  myVideoMini.currentTime = myVideoMini.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;
  myVideoMini.currentTime = myVideoMini.currentTime + 5;
  cTime = JiSuanHMS(myVideo.currentTime)
}

仔细听会有俩个视频的声音，所以我们可以取消任意一个音量(我这里是取消小窗的)

<div class="mini-win" id="miniWin">
  <video src="http://124.223.18.34:5555/static/video/gdyg/gdyg12.mp4" id="myVideoMini" onclick="miniClick()" muted="true"></video>
</div>

离开浏览视频不同步现象

myVideoMini.onplay = () => {
    myVideoMini.currentTime = myVideo.currentTime
}

还是有点不同步，但是缩小了很多

修改音频事件(为了小窗和视频同步)

//音频播放按键
const mp3Player = () => {
    myVideo.pause()
    //追加
    myVideoMini.pause()
    if(myAudio.paused){
        myAudio.play()
    }else {
        myAudio.pause()
    }
}

滚轮事件和小窗隐藏显示

<!--取消小窗点击事件-->

//window全局滚动事件
let numWheel = 0
window.onmousewheel = async(event) => {
    event = event||window.event;
    //event.wheelDelta 可以获取鼠标滚轮滚动的方向
    // console.log(event.wheelDelta)
    numWheel -= await event.wheelDelta
    console.log('numWheel:',numWheel)
    //对numWheel约束一句话概括就是: 限制在一个特定的区域
    if(numWheel <0){
    //numWheel不能小于0
        numWheel = await 0
    }else if(numWheel >= 2550){
    //numWheel不能超出范围(根据自己的来定,看console.log('numWheel:',numWheel)来进行修改)
        numWheel = 2550
    }
    if(numWheel >= 600){
        miniWin.style.display = 'block'
    }else {
        miniWin.style.display = 'none'
    }
}

完整代码

<!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/gdyg/gdyg12.mp4" 
        id="myVideo" onclick="player()" controlsList="nofullscreen noplaybackrate nodownload"
        disablePictureInPicture></video>
        <div class="timeStyle"></div>
        <div class="proessBox">
            <div id="proess"></div>
        </div>
        <div id="playImageStyle">
            <img src="./play.svg" alt="">
        </div>
        <div class="QuanPinStyle">
            <button onclick="QuanPing()">全屏</button>
        </div>
        <audio src="http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3" id="myAudio"></audio>
        <button onclick="mp3Player()" class="mp3PlayStyle">播放音乐</button>
        <!-- <button οnclick="openWin()">点击</button> -->
        <div class="mini-win" id="miniWin">
            <video src="http://124.223.18.34:5555/static/video/gdyg/gdyg12.mp4" id="myVideoMini" muted="true"></video>
        </div>
        <div id="playImageStyleMini" onclick="miniClick()">
            <img src="./play.svg" alt="" id="miniplay" />
        </div>
        <div class="testStyleMini"></div>
        <div id="closeMini">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" data-pointer="none" viewBox="0 0 16 16">
                <path d="m8 6.939 3.182-3.182a.75.75 0 1 1 1.061 1.061L9.061 8l3.182 3.182a.75.75 0 1 1-1.061 1.061L8 9.061l-3.182 3.182a.75.75 0 1 1-1.061-1.061L6.939 8 3.757 4.818a.75.75 0 1 1 1.061-1.061L8 6.939z"></path>
            </svg>
        </div>

        <!-- <div class="test1">父1</div>
        <div class="test2">父2</div> -->
    </div>
</body>
<script src="index.js"></script>
</html>

*{
    margin: 0;
    padding: 0;
}
.proessBox{
    position: absolute;
    left: 0;
    top: 390px;
    width: 700px;
    height: 5px;
    background-color: red;
    display: flex;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s;
}
.proessBox:hover{
    position: absolute;
    left: 0;
    top: 385px;
    height: 10px;
}
#proess{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: skyblue;
    z-index: 5;
}

.timeStyle{
    position: absolute;
    left: 20px;
    top: 370px;
    color: #fff;
}

video{
    width: 700px;
    height: 393.2px;
}

/* video::-webkit-media-controls-enclosure{
    overflow: hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

/* 去掉全屏时显示的自带控制条 */
video::-webkit-media-controls {
    display: none !important;
}

.mp3PlayStyle{
    position: absolute;
    left: 630px;
    top: 10px;
}

.QuanPinStyle{
    position: absolute;
    left: 650px;
    top: 370px;
}

/*小窗*/
.mini-win{
    position: fixed;
    left: 70%;
    top: 65%;
    width: 300px;
    height: 250px;
    display: none;
}
.mini-win video{
    width: 100%;
    height: 100%;
}

.mini-win:hover{
    cursor: all-scroll;
}

#playImageStyleMini {
    position: fixed;
    left: 78%;
    top: 79%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: none;
}
/* .mini-win:hover + #playImageStyleMini{
    display: block;
    cursor: all-scroll;
    
} */
#closeMini{
    position: fixed;
    left: 87%;
    top: 71%;
    width: 20px;
    height: 20px;
    fill: #fff;
    cursor: pointer;
    display: none;

}
/*测试小窗*/
.testStyleMini{
    width: 900px;
    height: 2000px;
    background-color: greenyellow;
    z-index: -1;
}

/*全屏样式*/
video:fullscreen{
    background-color: white;
}
#proess:fullscreen{
    position: absolute;
    left: 0;
    top: 80%;
    width: 100vw;
    height: 10px;
    background-color: red;
    z-index: 99;
}

/*图片*/
#playImageStyle{
    position: absolute;
    left: 600px;
    top: 280px;
    width: 80px;
    height:80px;
}

/*测试*/
.test1:hover + .test2{
    color: red;
}

const myVideo = document.getElementById("myVideo")//video
const timeStyle = document.querySelector(".timeStyle")//time
const proessBox = document.querySelector('.proessBox') //进度条元素
const proess = document.getElementById('proess') //进度条元素
const myAudio = document.getElementById('myAudio')//音乐元素
const miniWin = document.getElementById('miniWin')//小窗元素
const myVideoMini = document.getElementById('myVideoMini')//video小窗元素
const playImageStyle = document.getElementById('playImageStyle')//图片
const playImageStyleMini = document.getElementById('playImageStyleMini')
const miniplay = document.getElementById('miniplay')//小窗播放图标
const closeMini = document.getElementById('closeMini')//小窗取消图标

let num = 0
let audioArray = [
    "http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3",
    "http://124.223.18.34:5555/static/mp3/gdyg/rgwnbcxz.mp3"
]

let inter = null //定时器变量

window.onload = () => {
    // console.log(myVideo)
}

const player = () => {
    if(myVideo.paused){
        myVideo.play()
        myVideoMini.play()
    }else {
        myVideo.pause()
        myVideoMini.pause()
    }
}
const miniClick = () => {
    if(myVideoMini.paused){
        myVideo.play()
        myVideoMini.play()
    }else {
        myVideo.pause()
        myVideoMini.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>`
    playImageStyle.style.display = 'block'
}

//暂停后将即将播放事件函数
myVideo.onplaying = () => {
    // console.log('test')
    // console.log(myVideo.duration)
    playImageStyle.style.display = 'none'
}

//播放时事件函数
myVideo.onplay = () => {
    inter = setInterval(()=>{
        const allTime = JiSuanHMS(myVideo.duration)
        const cTime = JiSuanHMS(myVideo.currentTime)
        timeStyle.innerHTML = `<div>${cTime}/${allTime}</div>`
        myVideoMini.currentTime = myVideo.currentTime
    },1000)
    myAudio.pause()
    playImageStyle.style.display = 'none'
}

myVideoMini.onplay = () => {
    myVideoMini.currentTime = myVideo.currentTime
}

//暂定时事件函数
myVideo.onpause = () => {
    console.log('pause')
    clearInterval(inter)
    inter = null
    playImageStyle.style.display = 'block'
}

//视频时间更新事件函数
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 + '%'
}

const QuanPing = () => {
    /* if(myVideo.requestFullscreen){
        myVideo.requestFullscreen()
    }else if(myVideo.webkitRequestFullscreen){
        myVideo.webkitRequestFullscreen()
    }else {
        myVideo.webkitEnterFullscreen()
        let timer = setInterval(()=>{
            if(!myVideo.webkitDisplayingFullscreen){
                clearInterval(timer)
            }
        },1000)
    } */
    myVideo.requestFullscreen()
}
myAudio.onload = () => {
    myAudio.src = "http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3"
}
//音频播放按键
const mp3Player = () => {
    console.log('mp3:',myAudio.paused)
    if(myVideo.currentTime < 220){
        myAudio.src = "http://124.223.18.34:5555/static/mp3/gdyg/wbhwj.mp3"
    }else {
        myAudio.src = "http://124.223.18.34:5555/static/mp3/gdyg/rgwnbcxz.mp3"
    }
    myVideo.pause()
    myVideoMini.pause()
    if(myAudio.paused){
        myAudio.play()
    }else {
        myAudio.pause()
    }
    // console.log(myAudio.src)
    
}

/* 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
    // console.log(myVideo.currentTime)
    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;

    myVideoMini.currentTime = percent * myVideoMini.duration;
}

const openWin = () => {
    if(miniWin.style.display == 'block'){
        miniWin.style.display = 'none'
    }else{
        miniWin.style.display = 'block'
    }
}

//元素拖拽
myVideoMini.addEventListener('dragleave',function(e){
    e.stopPropagation();
    e.preventDefault();
    console.log(e.stopPropagation())
})
myVideoMini.onplay = () => {
    miniplay.src = "./pause.svg"
}
myVideoMini.onpause = () => {
    miniplay.src = "./play.svg"
}
myVideoMini.onmouseenter = () => {
    closeMini.style.display = 'block'
    miniplay.style.display = 'block'
}
myVideoMini.onmouseleave = () => {
    closeMini.style.display = 'none'
    miniplay.style.display = 'none'
}
playImageStyleMini.onmouseenter = () => {
    closeMini.style.display = 'block'
    miniplay.style.display = 'block'
}
playImageStyleMini.onmouseleave = () => {
    closeMini.style.display = 'none'
    miniplay.style.display = 'none'
}
closeMini.onmouseenter = () => {
    closeMini.style.display = 'block'
    miniplay.style.display = 'block'
}
closeMini.onmouseleave = () => {
    closeMini.style.display = 'none'
    miniplay.style.display = 'none'
}
let isMiniClose = false //关闭按钮标志位
closeMini.onclick = () => {
    isMiniClose = true
    miniWin.style.display = 'none'
    myVideoMini.style.display = 'none'
    closeMini.style.display = 'none'
    playImageStyle.style.display = 'none'
    playImageStyleMini.style.display = 'none'
}

//window全局键盘事件
window.onkeyup = (event) => {
    console.log(event.keyCode) //按键的ascii码值
    if(event.keyCode === 32){
        //空格按下
        //播放暂停逻辑
        if(myVideo.paused){
            myVideo.play()
        }else {
            myVideo.pause()
        }
        if(myVideoMini.paused){
            myVideo.play()
            myVideoMini.play()
        }else {
            myVideo.pause()
            myVideoMini.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;
        myVideoMini.currentTime = myVideoMini.currentTime - 5;
        cTime = JiSuanHMS(myVideo.currentTime)
    }
    if(event.keyCode === 38){
        //上箭头:38
        if(num <= 0){
            return
        }
        num--
        // console.log(num)
        if(num < 5){
            miniWin.style.display = 'none'
            playImageStyleMini.style.display = 'none'
        }
    }
    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;
        myVideoMini.currentTime = myVideoMini.currentTime + 5;
        cTime = JiSuanHMS(myVideo.currentTime)
    }
    if(event.keyCode === 40){
        //下箭头: 40
        num++
        // console.log(num)
        //5显示小窗
        if(num >= 5){
            miniWin.style.display = 'block'
            playImageStyleMini.style.display = 'block'
        }
    }


}

//window全局滚动事件
let numWheel = 0
window.onmousewheel = async(event) => {
    event = event||window.event;
    console.log(event)
    //event.wheelDelta 可以获取鼠标滚轮滚动的方向
    // console.log(event.wheelDelta)
    numWheel -= await event.wheelDelta
    console.log(numWheel)
    if(numWheel <0){
        numWheel = await 0
    }else if(numWheel >= 2550){
        numWheel = 2550
    }
    if(numWheel >= 600){
        // console.log('isMiniClose:',isMiniClose)
        if(isMiniClose == true){
            miniWin.style.display = 'none'
            myVideoMini.style.display = 'none'
            playImageStyleMini.style.display = 'none'
            return
        }
        miniWin.style.display = 'block'
        myVideoMini.style.display = 'block'
        playImageStyleMini.style.display = 'block'
    }else {
        isMiniClose = false
        miniWin.style.display = 'none'
        myVideoMini.style.display = 'none'
        playImageStyleMini.style.display = 'none'
    }
}

window.onmousedown = (event) => {
    console.log('mousedown:',event)
}