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

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

//全局变量
//播放的时间元素标签获取,是个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*****************,所以需要乘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)
}

视频全屏

<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>
  1. nodownload: 不要下载按钮
  2. nofullscreen: 不要全屏按钮
  3. noremoteplayback: 不要远程回放
  4. disablePictureInPicture : 禁止画中画 按钮
  5. 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){//上箭头:38if(num <= 0){return}num--myAudio.src = audioArray[num]
}
if(event.keyCode === 40){//下箭头: 40if(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.wheelDeltaconsole.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){//左箭头: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 - 5;myVideoMini.currentTime = myVideoMini.currentTime - 5;cTime = 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 + 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.wheelDeltaconsole.log('numWheel:',numWheel)//对numWheel约束一句话概括就是: 限制在一个特定的区域if(numWheel <0){//numWheel不能小于0numWheel = 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: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 = `<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 = nullplayImageStyle.style.display = 'block'
}//视频时间更新事件函数
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 + '%'
}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.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) //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 = trueminiWin.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){//左箭头: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 - 5;myVideoMini.currentTime = myVideoMini.currentTime - 5;cTime = JiSuanHMS(myVideo.currentTime)}if(event.keyCode === 38){//上箭头:38if(num <= 0){return}num--// console.log(num)if(num < 5){miniWin.style.display = 'none'playImageStyleMini.style.display = 'none'}}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 + 5;myVideoMini.currentTime = myVideoMini.currentTime + 5;cTime = JiSuanHMS(myVideo.currentTime)}if(event.keyCode === 40){//下箭头: 40num++// 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.wheelDeltaconsole.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 = falseminiWin.style.display = 'none'myVideoMini.style.display = 'none'playImageStyleMini.style.display = 'none'}
}window.onmousedown = (event) => {console.log('mousedown:',event)
}

目前先到这个定义吧

查看源码

html自定义video播放器相关推荐

  1. H5 实现自定义video播放器,快来点我吧

    效果 要实现自定义video播放器需要熟悉video的相关操作 视频播放它有哪些操作         1. 播放 play()         2. 暂停 pause()         3. 判断当 ...

  2. JS 用CANVAS自定义VIDEO播放器

    JS 用CANVAS自定义VIDEO播放器 概述 CANVAS绘制核心代码 播放器代码 使用页面HTML代码 使用页面JS代码 使用示例 概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...

  3. html5+video手机样式修改,如何自定义video播放器样式？

    本篇文章给大家分享了关于如何自定义video播放器样式,内容很详细,希望可以帮助到大家. DIY 本文基于HTML5 Video API,自定义Web视频播放器样式. 其实吧,原生的video 标签样 ...

  4. 自定义video播放器的常用的事件。

    window.onresize 这个事件主要用于当浏览器窗口发生改变时,实时获取video的width和height: 代码示例: window.onresize=function() {// 控制窗 ...

  5. 玩转前端 Video 播放器

    Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...

  6. 【Web技术】662- 玩转前端 Video 播放器

    Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...

  7. 模拟video播放器

    更新: 关于第二点,也就是说计算进度条拖放按钮定位的问题. 很感谢 batsing 同学提供了更好的方案: 滑块左偏量 = (进度条长 - 滑块长) * (已播时间/总时长) 尝试过之后发现除了拖曳滑 ...

  8. 微信中H5同层Video播放器接入教程

    微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器 通过video属性"x5-video-player-type"声明启用同层H5 ...

  9. android 自定义MP4播放器

    昨天,在网上找了好多资料,终于做了一个自定义的播发器. 视频播放方式 在Android中播放视频的方式有两种: 1.使用MediaPlayer结合SurfaceView进行播放.其中通过Surface ...

最新文章

  1. 同在服务器无响应,全部服务器无响应！！！
  2. 文巾解题 17. 电话号码的字母组合
  3. pygame.rect中 Rect类 属性示意
  4. 由防重复点击引发的幂等性问题思考
  5. Eigen官网教程 （4） 高级初始化
  6. Weblogic负载均衡/Session复制之集群架构
  7. 好系统教你如何禁用或删除启动应用程序以加速Windows
  8. 浏览器window对象
  9. 子网划分，掩码转换计算
  10. 微信OAUTh2.0来实现第三方授权登录
  11. OpenSTF手机设备管理平台-------二次开发
  12. 迅雷离线下载 linux,linux 下使用迅雷离线下载
  13. 熊孩子说“你没看过奥特曼”，赶紧用Python学习一下，没想到
  14. 百度地图坐标转成腾讯地图坐标
  15. 零基础学彩铅——下午茶（含详细步骤）
  16. 外星人大战----------------------游戏开发（四）
  17. miui系统备份恢复失败（一招解决，，无需技术也行）
  18. 深度学习中AP、mAP、recall、IoU、NMS的评价指标介绍
  19. 车辆重识别综述（2021年非专业总结）
  20. [小项目]手把手教你C语言哈夫曼压缩/解压缩

热门文章

  1. JavaWeb JavaBean，MVC三层架构
  2. ubuntu16.04无法联网
  3. 【电脑小技巧每日一讲：SQL server 2016日志文件的清理】
  4. 【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现
  5. 第三方客户端配置个人教育邮箱（以华北电力大学邮箱为例）
  6. 在虚拟机（centos）配置postgresql数据库(1) - 安装篇
  7. PHP_40+开发工具推荐
  8. FileSystemWatcher触发多次Change事件的解决办法
  9. 游戏开发经验之游戏App是先做大用户量 还是先盈利呢
  10. java 自动转 golang_JAVA转Golang