原生js实现播放器
实现效果如图
html完整代码如下
<div class="videoPalyer">
<div class="videoPlayerTop">
<main class="mainVideo">
<div class="loading" style="display: none;">
<p>
加载中
</p>
</div>
<div class="viedoPlayerAll">
<div class="messageHiddenTop">
<div class="messageHiddenTopCenter">
<span class="messageHiddenTopCenterTitle">
我是电视剧名字：
</span>
<span class="messageHiddenTopCenterTitleConten">
第一集 我是第一集的介绍66666
</span>
<span class="timeMessageHiddden">
<span>
20
</span>
分钟
</span>
</div>
</div>
<div id="videoPlayermax">
<video name="anwerTrue" src="/public/src/viedo/8.mp4" id="videoPlayer" controls data-custom></video>
</div>
<div class="messageHiddenBottom">
<!-- 进度条 -->
<div class="loadingDiv" id="loadingDiv">
<div class="obtainDiv" id="obtainDiv">
</div>
<div class="loadingBar" id="loadingBar">
</div>
<div class="spot" id="spot">
</div>
</div>
<div class="timeId" id="timeId">
</div>
<div class="bottomHiddenBTN">
<div class="leftHiidenBtn">
<ul class="leftHiddenBTNlist">
<li>
<span id="changePlayAndPause" onclick="playPause()">
<svg t="1697419711590" class="icon iconPause" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3795" width="29" height="29"><path d="M243.2 208h166.4v608H243.2zM614.4 208h166.4v608h-166.4z" fill="#ffffff" p-id="3796"></path></svg>
</span>
</li>
<li class="otherBTN">
<span>
<svg t="1697420034606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4886" width="27" height="27"><path d="M740.864 807.936c15.36 0 28.16-12.8 28.16-28.16V225.28c0-15.36-12.8-28.16-28.16-28.16h-33.28c-15.36 0-28.16 12.8-28.16 28.16v240.128c-3.072-2.56-6.144-5.12-9.728-7.168L279.04 205.824C235.52 177.664 199.68 197.12 199.68 248.832v505.856c0 51.712 35.84 71.68 79.872 44.544l388.608-240.64c4.096-2.56 7.68-5.12 10.752-7.68v228.352c0 15.36 12.8 28.16 28.16 28.16l33.792 0.512z" fill="#ffffff" p-id="4887"></path></svg>
</span>
</li>
<li class="otherBTN">
<span>
<svg t="1697420209033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7174" width="28" height="28"><path d="M558.545455 721.454545H155.927273C123.345455 721.454545 93.090909 691.2 93.090909 658.618182V318.836364C93.090909 286.254545 123.345455 256 155.927273 256h572.509091c32.581818 0 62.836364 30.254545 62.836363 62.836364V349.090909c0 13.963636 9.309091 23.272727 23.272728 23.272727s23.272727-9.309091 23.272727-23.272727v-30.254545c0-58.181818-51.2-109.381818-109.381818-109.381819H155.927273C97.745455 209.454545 46.545455 260.654545 46.545455 318.836364v339.781818C46.545455 716.8 97.745455 768 155.927273 768H558.545455c13.963636 0 23.272727-9.309091 23.272727-23.272727s-9.309091-23.272727-23.272727-23.272728z" p-id="7175" fill="#ffffff"></path><path d="M325.818182 349.090909h46.545454v46.545455h-46.545454zM418.909091 349.090909h186.181818v46.545455h-186.181818zM186.181818 465.454545h46.545455v46.545455H186.181818zM279.272727 465.454545h186.181818v46.545455h-186.181818zM372.363636 581.818182h186.181819v46.545454h-186.181819zM279.272727 581.818182h46.545455v46.545454h-46.545455zM802.909091 465.454545c-95.418182 0-174.545455 79.127273-174.545455 174.545455s79.127273 174.545455 174.545455 174.545455 174.545455-79.127273 174.545454-174.545455-79.127273-174.545455-174.545454-174.545455z m0 302.545455c-69.818182 0-128-58.181818-128-128s58.181818-128 128-128 128 58.181818 128 128-58.181818 128-128 128z" p-id="7176" fill="#ffffff"></path><path d="M900.654545 586.472727c-9.309091-9.309091-23.272727-9.309091-32.581818 0l-81.454545 81.454546-48.872727-48.872728c-9.309091-9.309091-23.272727-9.309091-32.581819 0-9.309091 9.309091-9.309091 23.272727 0 32.581819l65.163637 65.163636c9.309091 9.309091 23.272727 9.309091 32.581818 0l97.745454-97.745455c9.309091-9.309091 9.309091-23.272727 0-32.581818z" p-id="7177" fill="#ffffff"></path></svg>
</span>
</li>
<li class="otherBTN">
<span>
<svg t="1697420533191" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7451" width="28" height="28"><path d="M226.58 320.39h-48c-35.9 0-65-29.1-65-65s29.1-65 65-65h48c35.9 0 65 29.1 65 65s-29.1 65-65 65zM723.58 320.39h-322c-35.9 0-65-29.1-65-65s29.1-65 65-65h322c35.9 0 65 29.1 65 65s-29.1 65-65 65zM402.58 580.39h-224c-35.9 0-65-29.1-65-65s29.1-65 65-65h224c35.9 0 65 29.1 65 65s-29.1 65-65 65zM251.58 839.39h-73c-35.9 0-65-29.1-65-65s29.1-65 65-65h73c35.9 0 65 29.1 65 65s-29.1 65-65 65zM424.58 839.39h-1c-35.9 0-65-29.1-65-65s29.1-65 65-65h1c35.9 0 65 29.1 65 65s-29.1 65-65 65zM954.82 588.59l-93.4-161.78a59.189 59.189 0 0 0-51.27-29.6h-186.8a59.201 59.201 0 0 0-51.27 29.6l-93.4 161.78a59.225 59.225 0 0 0 0 59.2l93.4 161.78a59.189 59.189 0 0 0 51.27 29.6h186.81c21.15 0 40.69-11.28 51.27-29.6l93.4-161.78a59.2 59.2 0 0 0-0.01-59.2z m-238.07 95.78c-36.55 0-66.18-29.63-66.18-66.18 0-36.55 29.63-66.18 66.18-66.18 36.55 0 66.18 29.63 66.18 66.18 0 36.55-29.63 66.18-66.18 66.18z" p-id="7452" fill="#ffffff"></path></svg>
</span>
</li>
<li class="otherBTN">
<input type="text"autocomplete="off" id="inputUserbarrage" placeholder="小猪佩奇">
<button id="sendBarrage">发送弹幕</button>
</li>
</ul>
</div>
<div class="rightHIddenBTN">
<ul class="rightHIddenBTNList">
<li class="rightBTNhidding">
<span id="timeInnerIntex">
11:00/22:00
</span>
</li>
<li class="rightBTNhidding doubleSpeedBig">
<div class="doubleSpeed">
<ul id="doubleSpeed">
<li>
2.00x
</li>
<li>
1.50x
</li>
<li>
1.25x
</li>
<li>
1.00x
</li>
<li>
0.75x
</li>
</ul>
</div>
<span>
倍速
</span>
</li>
<li class="rightBTNhidding">
<span>
清晰度
</span>
</li>
<li class="rightBTNhidding volumeBig">
<div class="volume">
<span id="volumeValuernumber">
100
</span>
<div class="volumeContain" id="volumeContainId">
<div class="VolumeValue" id="VolumeValueId"></div>
<div class="VolumeSpot" id="VolumeSpotId"></div>
</div>
<!-- <div class="VolumeText" id="VolumeTextId">音量：100%</div> -->
</div>
<span id="volumeuicon">
<svg t="1697422769250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8518" width="24" height="24"><path d="M668.8 902.9c-9.4 0-18.9-2-27.8-6L260 724.1h-84c-37.1 0-67.2-30.1-67.2-67.2V367.1c0-37.1 30.1-67.2 67.2-67.2h84.1l381-172.8c20.9-9.5 44.9-7.7 64.2 4.7 19.3 12.4 30.8 33.5 30.8 56.5v647.3c0 22.9-11.5 44.1-30.8 56.5a67.01 67.01 0 0 1-36.5 10.8zM198.4 634.5h66.5c9.6 0 18.9 2 27.7 5.9l353.8 160.5V223.1L292.7 383.6c-8.8 4-18.2 6-27.8 6h-66.5v244.9zM870.4 758.4c-24.7 0-44.8-20.1-44.8-44.8V310.4c0-24.7 20.1-44.8 44.8-44.8 24.7 0 44.8 20.1 44.8 44.8v403.2c0 24.7-20.1 44.8-44.8 44.8z" fill="#ffffff" p-id="8519"></path></svg>
</span>
</li>
<li class="rightBTNhidding" id="FullScreenId">
<span id="changeFullScreen">
<svg t="1697422902517" class="icon" id="iconfull" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11871" width="22" height="22"><path d="M95.500388 368.593511c0 11.905658-9.637914 21.543572-21.543573 21.543572-11.877311 0-21.515225-9.637914-21.515225-21.543572V188.704684c0-37.502824 15.307275-71.575684 39.997343-96.265751s58.762928-39.997342 96.265751-39.997343h179.888827c11.905658 0 21.543572 9.637914 21.543572 21.515225 0 11.905658-9.637914 21.543572-21.543572 21.543573H188.704684c-25.625512 0-48.926586 10.488318-65.821282 27.383014s-27.383014 40.19577-27.383014 65.821282v179.888827z m559.906101-273.093123c-11.877311 0-21.515225-9.637914-21.515226-21.543573 0-11.877311 9.637914-21.515225 21.515226-21.515225h179.917174c37.502824 0 71.547337 15.307275 96.237404 39.997343s40.025689 58.762928 40.02569 96.265751v179.888827c0 11.905658-9.637914 21.543572-21.543572 21.543572-11.877311 0-21.515225-9.637914-21.515226-21.543572V188.704684c0-25.625512-10.488318-48.926586-27.411361-65.821282-16.894696-16.894696-40.19577-27.383014-65.792935-27.383014h-179.917174z m273.12147 559.906101c0-11.877311 9.637914-21.515225 21.515226-21.515226 11.905658 0 21.543572 9.637914 21.543572 21.515226v179.917174c0 37.474477-15.335622 71.547337-40.02569 96.237404s-58.734581 39.997342-96.237404 39.997343h-179.917174c-11.877311 0-21.515225-9.637914-21.515226-21.515225s9.637914-21.543572 21.515226-21.543573h179.917174c25.597165 0 48.898239-10.488318 65.792935-27.383014 16.923043-16.894696 27.411361-40.19577 27.411361-65.792935v-179.917174z m-559.934448 273.093123c11.905658 0 21.543572 9.666261 21.543572 21.543573s-9.637914 21.515225-21.543572 21.515225H188.704684c-37.502824 0-71.575684-15.307275-96.265751-39.997343s-39.997342-58.762928-39.997343-96.237404v-179.917174c0-11.877311 9.637914-21.515225 21.515225-21.515226 11.905658 0 21.543572 9.637914 21.543573 21.515226v179.917174c0 25.597165 10.488318 48.898239 27.383014 65.792935s40.19577 27.383014 65.821282 27.383014h179.888827z" fill="#ffffff" p-id="11872"></path></svg>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
但是写的时候其实是有点问题的 当时那个全屏时候监听esc事件的时候一直监听不到 后来和学长讨论的时候 学长说可以只改变父盒子的形状改变全屏状态 内盒子一直占比100%
<div class="loadingDiv" id="loadingDiv">
<div class="obtainDiv" id="obtainDiv">
</div>
<div class="loadingBar" id="loadingBar">
</div>
<div class="spot" id="spot">
</div>
</div>
这是进度条的代码 使用flex布局使其站在同一条上面
计算播放的进度改变它的宽度即可loadingBar
css代码完整版如下
@charset "UTF-8";
.leftVidioPlayer {
height: 100vh;
position: relative;
}
.videoPalyer {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
}
.videoPlayerTop {
position: absolute;
height: 100%;
width: 100%;
}
.mainVideo {
position: relative;
width: 100%;
height: 100%;
}
.loading {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 500px;
font-size: 40px;
background-color: black;
color: white;
}
#videoPlayermax {
width: 100%;
height: 100%;
position: relative;
top: 0%;
}
#videoPlayer {
width: 100%;
height: 90%;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
top: 10%;
}
#videoPlayermax video::-webkit-media-controls {
display: none;
}
#videoPlayermax video::-webkit-scrollbar {
display: none;
}
.userBtnchangVideo {
width: 100%;
height: 83px;
background-color: white;
position: absolute;
z-index: 20;
bottom: 0px;
}
.viedoPlayerAll {
width: 100%;
height: 100%;
background-color: black;
}
.messageHiddenTop {
width: 100%;
background-color: black;
height: 60px;
position: absolute;
top: 67px;
z-index: 60;
opacity: 0.8;
color: white;
}
.messageHiddenTopCenter {
width: 98%;
margin: 0 auto;
margin-top: 10px;
}
.messageHiddenTopCenterTitle {
font-size: 23px;
}
.messageHiddenTopCenterTitleConten {
color: rgb(240, 236, 236);
color: #f0ecec;
position: relative;
top: -2px;
left: -8px;
font-size: 18px;
}
video {
cursor: default;
}
.timeMessageHiddden {
margin-left: 6px;
background-color: #767474;
padding: 3px;
transform: scale(0.8);
font-size: 12px;
position: relative;
top: -3px;
}
.messageHiddenBottom {
width: 100%;
height: 66px;
position: absolute;
background-color: rgb(14, 14, 14);
opacity: 0.8;
bottom: 0;
}
.loadingDiv:hover ~ .time {
display: block;
}
.loadingDiv {
height: 12px;
margin-top: 10px;
display: flex;
align-items: center;
position: relative;
background-color: rgb(169, 169, 169);
}
.obtainDiv {
height: 100%;
width: 0px;
/* 设置穿透节点 */
pointer-events: none;
/* 设置动画时间 */
position: absolute;
background-color: rgb(219, 219, 219);
}
.spot {
width: 15px;
height: 15px;
/* 设置渐变背景 */
background-image: linear-gradient(to right, rgb(169, 169, 169), rgb(99, 99, 99));
margin-left: -7.5px;
border-radius: 50%;
display: none;
z-index: 8;
}
.loadingBar {
max-width: 100%;
/* 设置穿透节点 */
pointer-events: none;
height: 12px;
background-color: rgb(180, 215, 238);
z-index: 6;
}
.bottomHiddenBTN {
display: flex;
justify-content: space-between;
margin-top: 12px;
width: 100%;
}
.leftHiidenBtn {
width: 50%;
}
.rightHIddenBTN {
width: 27%;
}
.otherBTN {
margin-left: 12px;
}
.leftHiddenBTNlist li {
float: left;
}
#inputUserbarrage {
background-color: #767474;
border-radius: 4px;
position: relative;
top: -14px;
width: 356px;
height: 21px;
padding: 5px;
}
.rightHIddenBTNList {
color: white;
float: left;
margin-left: 13px;
}
#sendBarrage {
margin: 10px;
padding: 6px;
border-radius: 6px;
position: relative;
top: -12px;
}
.rightBTNhidding {
float: left;
margin-left: 20px;
}
.doubleSpeedBig {
position: relative;
}
.doubleSpeed {
background-color: #141615;
color: white;
width: 96px;
height: 200px;
position: absolute;
top: -200px;
left: -25px;
text-align: center;
}
.doubleSpeed ul li {
padding-top: 6px;
margin-top: 5px;
padding-bottom: 6px;
border-bottom: 1px solid rgb(130, 127, 127);
transition: 0.4s;
}
.doubleSpeed ul li:hover {
background-color: #767474;
cursor: pointer;
}
.doubleSpeed {
display: none;
}
.doubleSpeedBig:hover {
cursor: pointer;
}
.doubleSpeedBig:hover .doubleSpeed {
display: inline-block;
}
.volumeBig {
position: relative;
text-align: center;
}
.volume {
width: 6px;
height: 126px;
padding: 12px 9px;
background-color: rgb(169, 169, 169);
border-bottom: 1px solid rgb(32, 32, 32);
top: -160px;
position: absolute;
display: none;
z-index: 1;
padding-top: 25px;
}
.volumeTwo {
width: 10px;
margin: 0 auto;
height: 130px;
background-color: #767474;
}
.volumeValue {
width: 10px;
height: 0px;
background-color: #dddddd;
margin: 0 auto;
}
.volumeSpot {
width: 12px;
height: 12px;
margin-top: -4.5px;
margin-left: -2.5px;
border-radius: 50%;
background-image: radial-gradient(#dddddd, rgb(32, 32, 32));
}
.volumeTwoPro {
width: 6px;
height: 126px;
padding: 12px 9px;
background-color: rgb(169, 169, 169);
border-bottom: 1px solid rgb(32, 32, 32);
top: -130px;
position: absolute;
z-index: 1;
}
.volume:hover .volumeTwo {
display: block;
}
.volumeTwoPro > .volumeContain,
.volumeTwo > .volumeContain {
width: 6px;
height: 130px;
background-color: rgb(32, 32, 32);
position: absolute;
}
.volumeContain > .VolumeValue {
width: 6px;
height: 0px;
background-color: #dddddd;
}
.volumeContain {
width: 6px;
height: 130px;
background-color: rgb(32, 32, 32);
position: absolute;
}
.volumeContain > .VolumeSpot {
width: 12px;
height: 12px;
margin-top: -4.5px;
margin-left: -2.5px;
border-radius: 50%;
background-image: radial-gradient(#dddddd, rgb(32, 32, 32));
}
.volumeBig:hover .volume {
display: inline-block;
}
#changePlayAndPause {
width: 28px;
display: inline-block;
text-align: center;
}
.timeId {
width: 56px;
height: 24px;
position: absolute;
margin-top: -44px;
background-color: rgb(169, 169, 169);
color: rgb(32, 32, 32);
border-bottom: 2px solid rgb(32, 32, 32);
text-align: center;
font-weight: bold;
line-height: 24px;
display: none;
}
.spotPro {
width: 15px;
height: 15px;
background-image: linear-gradient(to right, rgb(169, 169, 169), rgb(99, 99, 99));
margin-left: -7.5px;
border-radius: 50%;
z-index: 8;
}
#timeId {
position: absolute;
z-index: 6;
top: -16px;
}
#volumeValuernumber {
position: absolute;
top: 5px;
font-size: 12px;
/* transform: scale(0.7); */
left: 0px;
width: 100%;
}/*# sourceMappingURL=viedoPlayer.css.map */
然后就是原生js
//先获取需要的元素
let main = document.querySelector('main')
let loadingDiv=document.getElementById("loadingDiv")
let spot=document.getElementById("spot")
let timeId=document.getElementById("timeId")
let loadingBar=document.getElementById("loadingBar")
let messageHiddenBottom=document.getElementsByClassName("messageHiddenBottom")[0]
let obtainDiv=document.getElementById("obtainDiv")
let FullScreenId=document.getElementById('FullScreenId')
let changeFullScreen=document.getElementById("changeFullScreen")
let volumeContainId=document.getElementById("volumeContainId")
let VolumeSpotId=document.getElementById("VolumeSpotId")
let VolumeValueId=document.getElementById("VolumeValueId")
let bottomHiddenBTN=document.getElementsByClassName("bottomHiddenBTN")[0]
let volumeValuernumber=document.getElementById("volumeValuernumber")
let volumeuicon=document.getElementById("volumeuicon")
//播放名单
const ViedoUrl = {
media1: "8.mp4",
media4: "1.mp4"
}
//设置播放节点
let videoPlayer = document.getElementById("videoPlayer");
let timeInnerIntex = document.getElementById("timeInnerIntex")
let doubleSpeed = document.getElementById("doubleSpeed")
//设置播放的文件
videoPlayer.src = '/public/src/viedo/' + ViedoUrl['media' + 1];
//计算播放的时长
function enhanceVideoSeek() {
let minute = 0,
second = 0,
VideoMinute = 0,
VideoSecond = 0;
minute = parseInt(videoPlayer.currentTime % 3600 / 60);
// 三目运算：小于10则在前面添加0
minute = minute < 10 ? '0' + minute : minute;
// 已播放的秒钟
second = parseInt(videoPlayer.currentTime % 3600 % 60);
second = second < 10 ? '0' + second : second;
// 总时长的分钟
VideoMinute = parseInt(videoPlayer.duration % 3600 / 60);
VideoMinute = VideoMinute < 10 ? '0' + VideoMinute : VideoMinute;
// 总时长的秒钟
VideoSecond = parseInt(videoPlayer.duration % 3600 % 60);
VideoSecond = VideoSecond < 10 ? '0' + VideoSecond : VideoSecond;
// 设置对应节点的文本节点
timeInnerIntex.innerText = minute + ":" + second + "/" + VideoMinute + ":" + VideoSecond;
}
//倍速
for (let itme of doubleSpeed.children) {
itme.addEventListener('click', function () {
videoPlayer.playbackRate = parseFloat(itme.innerText.substring(0, 4));
});
}
let changePlayAndPause=document.getElementById("changePlayAndPause");
function playPause() {
console.log(videoPlayer.pause);
try {
if (videoPlayer.paused) {
console.log("播放");
videoPlayer.play();
videoPlayer.setAttribute('data-custom', 'play');
changePlayAndPause.innerHTML=`
<svg t="1697419711590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3795" width="29" height="29"><path d="M243.2 208h166.4v608H243.2zM614.4 208h166.4v608h-166.4z" fill="#ffffff" p-id="3796"></path></svg>
`
} else {
console.log("暂停");
videoPlayer.pause();
videoPlayer.setAttribute('data-custom', 'pause');
changePlayAndPause.innerHTML=`
<svg t="1697589820058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2519" width="23" height="23"><path d="M899.117 526.883a30.04 30.04 0 0 1-3.976 5.365 29.922 29.922 0 0 1-1.548 1.58l-0.2 0.186a30.087 30.087 0 0 1-5.472 4.057L165.858 955.094c-0.047 0.027-0.1 0.046-0.143 0.073q-1.155 0.659-2.37 1.214c-0.145 0.066-0.289 0.132-0.434 0.2q-1.084 0.476-2.212 0.864c-0.238 0.083-0.475 0.165-0.713 0.241-0.645 0.205-1.3 0.386-1.963 0.548-0.348 0.085-0.7 0.168-1.044 0.24-0.56 0.116-1.126 0.213-1.7 0.3q-1.416 0.21-2.833 0.283h-0.016a29.977 29.977 0 0 1-4.5-0.107c-0.243-0.024-0.483-0.057-0.723-0.086a30.513 30.513 0 0 1-2.109-0.331 31.377 31.377 0 0 1-1.021-0.222c-0.6-0.139-1.191-0.293-1.78-0.469-0.331-0.1-0.658-0.2-0.984-0.315q-0.921-0.309-1.82-0.676c-0.241-0.1-0.479-0.2-0.716-0.307q-1.047-0.461-2.055-1c-0.108-0.058-0.215-0.118-0.322-0.177a29.753 29.753 0 0 1-8.652-7.174l-0.071-0.089a29.873 29.873 0 0 1-1.59-2.124c-0.3-0.439-0.589-0.885-0.866-1.34-0.108-0.179-0.233-0.341-0.338-0.524a29.859 29.859 0 0 1-4-16V95.886a30 30 0 0 1 44.981-26.984l722.265 417a30 30 0 0 1 10.988 40.981zM180.89 877.13l632.327-365.2L180.89 146.856V877.13z" fill="#ffffff" p-id="2520"></path></svg>
`
}
} catch (e) {
console.log(e);
}
}
function timeFun(e) {
let minute = 0,
second = 0;
minute = parseInt(((e.clientX - main.offsetLeft) / (loadingDiv.offsetWidth - spot.offsetWidth / 2)) *
videoPlayer.duration % 3600 / 60);
minute = minute < 10 ? '0' + minute : minute;
second = parseInt(((e.clientX - main.offsetLeft) / (loadingDiv.offsetWidth - spot.offsetWidth / 2)) *
videoPlayer.duration % 3600 % 60);
second = second < 10 ? '0' + second : second;
timeId.innerText = minute + ":" + second;
let marginLeft = ((e.clientX - main.offsetLeft) - (timeId.offsetWidth / 2));
if (marginLeft < 0) {
timeId.style.marginLeft = '0px';
} else if (marginLeft > ((loadingDiv.offsetWidth - spot.offsetWidth / 2) - timeId
.offsetWidth)) { // 判断marginLeft的值加上id名为timeId的节点的宽度是否大于于进度条容器的宽度
// 设置id名为timeId的节点的左边距
timeId.style.marginLeft = (loadingDiv.offsetWidth - spot.offsetWidth / 2) - timeId
.offsetWidth + 'px';
} else {
// 设置id名为timeId的节点的左边距
timeId.style.marginLeft = marginLeft + 'px';
}
}
function show_coords(e, parameter) {
// 判断进度条宽度是否超过其容器的宽度
if (parameter <= messageHiddenBottom.offsetWidth && parameter >= 0) {
// 设置进度条宽度
loadingBar.style.width = parameter + 'px';
if (e) {
// 调用timeFun方法
timeFun(e);
}
// 计算进度条宽度与其容器宽度的比例
let percent = loadingBar.offsetWidth / (loadingDiv.offsetWidth - spot.offsetWidth / 2);
// 设置视频播放时间（即播放到哪里了）
videoPlayer.currentTime = percent * videoPlayer.duration;
}
}
function LoadingBarWidthFun(e) {
// 被单击的如果是进度条上的圆点，则结束这个方法；否则调用show_coords方法
if (e.target.className === "spot" || e.target.className === "spotPro") return null;
show_coords(null, e.offsetX);
};
videoPlayer.addEventListener("loadedmetadata", function() {
//双击
loadingBar.style.width = '0px';
enhanceVideoSeek();
videoPlayer.addEventListener("dblclick", function() {
playPause();
});
spot.addEventListener('mousedown', function(e) {
videoPlayer.pause();
spot.className = "spotPro";
let xPro = (e.clientX - main.offsetLeft) - (spot.offsetLeft + spot.offsetWidth / 2);
// 鼠标移动时触发
document.onmousemove = function(e) {
// 移除进度条容器的单击事件
loadingDiv.removeEventListener("click", LoadingBarWidthFun);
// 计算进度条长度
let x = (e.clientX - main.offsetLeft) - xPro;
// 调用show_coords方法
show_coords(e, x);
// 鼠标按下开始拖动，时触发事件；没啥用，只是样式需要而已
document.ondragstart = function(ev) {
// 阻止默认事件
ev.preventDefault();
};
// 鼠标结束拖动并松开，时触发事件；没啥用，只是样式需要而已
document.ondragend = function(ev) {
// 阻止默认事件
ev.preventDefault();
};
}
// 鼠标松开时触发事件
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
// 给进度条容器绑定单击事件
loadingDiv.addEventListener("click", LoadingBarWidthFun);
// 修改相应节点类名，达到样式需求效果
spot.className = "spot";
// timeId.className = "time";
// 通过自定义属性判断拖动进度条前的播放状态，决定播放还是暂停
console.log(videoPlayer.getAttribute('data-custom'));
if (videoPlayer.getAttribute('data-custom') === "play") {
videoPlayer.play(); //播放
} else if (videoPlayer.getAttribute('data-custom') === "pause") {
videoPlayer.pause(); //暂停
}
};
});
// 鼠标进入在进度条时触发事件
loadingDiv.addEventListener('mousemove', function(e) {
spot.style.display='inline-block'
// 如果节点的id名为不为timeId
if (e.target.id != 'timeId') {
// 调用timeFun方法
timeFun(e);
}
});
})
videoPlayer.addEventListener("timeupdate", function(e) {
// 计算已播放时间和总时长的比例
let ratio = videoPlayer.currentTime / videoPlayer.duration;
// 计算并设置进度条长度
loadingBar.style.width = (loadingDiv.offsetWidth - 7.5) * ratio + 'px';
// 调用enhanceVideoSeek方法
enhanceVideoSeek();
// 判断已缓冲数据长度是否大于零
if (videoPlayer.buffered.length > 0) {
let obtainWidth = (videoPlayer.buffered.end(videoPlayer.buffered.length - 1) / videoPlayer.duration) *
loadingDiv.offsetWidth;
obtainDiv.style.width = obtainWidth + "px";
}
});
// 全屏
function isFullscreenForNoScroll(e) {
if(document.fullscreenElement==null){
//不是全屏
main.webkitRequestFullscreen();
FullScreenId.innerHTML=`
<svg t="1697636377461" class="icon" id="iconfull" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1578" width="22" height="22"><path d="M582.6 441.4v-320h50V356l274-274 35.4 35.4-274 274h234.6v50h-320zM117.4 942l274-274v234.6h50v-320h-320v50H356l-274 274 35.4 35.4zM132 132h302V82H82v352h50V132z m760 760H590v50h352V590h-50v302z" fill="#ffffff" p-id="1579"></path></svg>
`
}else{
document.exitFullscreen();
FullScreenId.innerHTML=`
<svg t="1697422902517" class="icon" id="iconfull" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11871" width="22" height="22"><path d="M95.500388 368.593511c0 11.905658-9.637914 21.543572-21.543573 21.543572-11.877311 0-21.515225-9.637914-21.515225-21.543572V188.704684c0-37.502824 15.307275-71.575684 39.997343-96.265751s58.762928-39.997342 96.265751-39.997343h179.888827c11.905658 0 21.543572 9.637914 21.543572 21.515225 0 11.905658-9.637914 21.543572-21.543572 21.543573H188.704684c-25.625512 0-48.926586 10.488318-65.821282 27.383014s-27.383014 40.19577-27.383014 65.821282v179.888827z m559.906101-273.093123c-11.877311 0-21.515225-9.637914-21.515226-21.543573 0-11.877311 9.637914-21.515225 21.515226-21.515225h179.917174c37.502824 0 71.547337 15.307275 96.237404 39.997343s40.025689 58.762928 40.02569 96.265751v179.888827c0 11.905658-9.637914 21.543572-21.543572 21.543572-11.877311 0-21.515225-9.637914-21.515226-21.543572V188.704684c0-25.625512-10.488318-48.926586-27.411361-65.821282-16.894696-16.894696-40.19577-27.383014-65.792935-27.383014h-179.917174z m273.12147 559.906101c0-11.877311 9.637914-21.515225 21.515226-21.515226 11.905658 0 21.543572 9.637914 21.543572 21.515226v179.917174c0 37.474477-15.335622 71.547337-40.02569 96.237404s-58.734581 39.997342-96.237404 39.997343h-179.917174c-11.877311 0-21.515225-9.637914-21.515226-21.515225s9.637914-21.543572 21.515226-21.543573h179.917174c25.597165 0 48.898239-10.488318 65.792935-27.383014 16.923043-16.894696 27.411361-40.19577 27.411361-65.792935v-179.917174z m-559.934448 273.093123c11.905658 0 21.543572 9.666261 21.543572 21.543573s-9.637914 21.515225-21.543572 21.515225H188.704684c-37.502824 0-71.575684-15.307275-96.265751-39.997343s-39.997342-58.762928-39.997343-96.237404v-179.917174c0-11.877311 9.637914-21.515225 21.515225-21.515226 11.905658 0 21.543572 9.637914 21.543573 21.515226v179.917174c0 25.597165 10.488318 48.898239 27.383014 65.792935s40.19577 27.383014 65.821282 27.383014h179.888827z" fill="#ffffff" p-id="11872"></path></svg>
`
}
}
// 单击id名为WebFullScreenId的节点时触发事件
FullScreenId.addEventListener('click', isFullscreenForNoScroll);
//监听窗口变化
window.onresize = function () {
if (!document.fullscreenElement) {
FullScreenId.innerHTML=`
<svg t="1697422902517" class="icon" id="iconfull" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11871" width="22" height="22"><path d="M95.500388 368.593511c0 11.905658-9.637914 21.543572-21.543573 21.543572-11.877311 0-21.515225-9.637914-21.515225-21.543572V188.704684c0-37.502824 15.307275-71.575684 39.997343-96.265751s58.762928-39.997342 96.265751-39.997343h179.888827c11.905658 0 21.543572 9.637914 21.543572 21.515225 0 11.905658-9.637914 21.543572-21.543572 21.543573H188.704684c-25.625512 0-48.926586 10.488318-65.821282 27.383014s-27.383014 40.19577-27.383014 65.821282v179.888827z m559.906101-273.093123c-11.877311 0-21.515225-9.637914-21.515226-21.543573 0-11.877311 9.637914-21.515225 21.515226-21.515225h179.917174c37.502824 0 71.547337 15.307275 96.237404 39.997343s40.025689 58.762928 40.02569 96.265751v179.888827c0 11.905658-9.637914 21.543572-21.543572 21.543572-11.877311 0-21.515225-9.637914-21.515226-21.543572V188.704684c0-25.625512-10.488318-48.926586-27.411361-65.821282-16.894696-16.894696-40.19577-27.383014-65.792935-27.383014h-179.917174z m273.12147 559.906101c0-11.877311 9.637914-21.515225 21.515226-21.515226 11.905658 0 21.543572 9.637914 21.543572 21.515226v179.917174c0 37.474477-15.335622 71.547337-40.02569 96.237404s-58.734581 39.997342-96.237404 39.997343h-179.917174c-11.877311 0-21.515225-9.637914-21.515226-21.515225s9.637914-21.543572 21.515226-21.543573h179.917174c25.597165 0 48.898239-10.488318 65.792935-27.383014 16.923043-16.894696 27.411361-40.19577 27.411361-65.792935v-179.917174z m-559.934448 273.093123c11.905658 0 21.543572 9.666261 21.543572 21.543573s-9.637914 21.515225-21.543572 21.515225H188.704684c-37.502824 0-71.575684-15.307275-96.265751-39.997343s-39.997342-58.762928-39.997343-96.237404v-179.917174c0-11.877311 9.637914-21.515225 21.515225-21.515226 11.905658 0 21.543572 9.637914 21.543573 21.515226v179.917174c0 25.597165 10.488318 48.898239 27.383014 65.792935s40.19577 27.383014 65.821282 27.383014h179.888827z" fill="#ffffff" p-id="11872"></path></svg>
`
}
}
// 音量
var y;
function volumeFun(e) {
// 判断e是否为空，如果为空就设置它
e = e || document;
y = e.clientY - volumeContainId.getBoundingClientRect().top - (VolumeSpotId.offsetHeight / 2);
if (y >= 0 && y <= 130) {
VolumeValueId.style.height = y + 'px';
} else if (y > 130) {
VolumeValueId.style.height = '126px';
} else {
VolumeValueId.style.height = '0px';
}
VolumeValueId.style.height = (VolumeValueId.offsetHeight - 6) + 'px';
if(videoPlayer.name=='anwerTrue'){
VolumeValueId.offsetHeight==0
}else{
}
if(VolumeValueId.offsetHeight==0){
if(y<0){
console.log("fushu222");
volumeuicon.innerHTML=`
<svg t="1697422769250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8518" width="24" height="24"><path d="M668.8 902.9c-9.4 0-18.9-2-27.8-6L260 724.1h-84c-37.1 0-67.2-30.1-67.2-67.2V367.1c0-37.1 30.1-67.2 67.2-67.2h84.1l381-172.8c20.9-9.5 44.9-7.7 64.2 4.7 19.3 12.4 30.8 33.5 30.8 56.5v647.3c0 22.9-11.5 44.1-30.8 56.5a67.01 67.01 0 0 1-36.5 10.8zM198.4 634.5h66.5c9.6 0 18.9 2 27.7 5.9l353.8 160.5V223.1L292.7 383.6c-8.8 4-18.2 6-27.8 6h-66.5v244.9zM870.4 758.4c-24.7 0-44.8-20.1-44.8-44.8V310.4c0-24.7 20.1-44.8 44.8-44.8 24.7 0 44.8 20.1 44.8 44.8v403.2c0 24.7-20.1 44.8-44.8 44.8z" fill="#ffffff" p-id="8519"></path></svg>
`
videoPlayer.volume = (130 - VolumeValueId.offsetHeight) / 130
volumeValuernumber.innerHTML= parseInt(100*videoPlayer.volume)
}
else{
volumeValuernumber.innerHTML=0;
videoPlayer.volume =0
volumeuicon.innerHTML=`
<svg t="1697722044520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1777" width="22" height="22"><path d="M128 420.576v200.864h149.12l175.456 140.064V284.288l-169.792 136.288H128z m132.256-64l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM752 458.656L870.4 300.8a32 32 0 1 1 51.2 38.4L792 512l129.6 172.8a32 32 0 0 1-51.2 38.4l-118.4-157.856-118.4 157.856a32 32 0 0 1-51.2-38.4l129.6-172.8-129.6-172.8a32 32 0 0 1 51.2-38.4l118.4 157.856z" fill="#ffffff" p-id="1778"></path></svg>
`
}
}
else{
volumeuicon.innerHTML=`
<svg t="1697422769250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8518" width="24" height="24"><path d="M668.8 902.9c-9.4 0-18.9-2-27.8-6L260 724.1h-84c-37.1 0-67.2-30.1-67.2-67.2V367.1c0-37.1 30.1-67.2 67.2-67.2h84.1l381-172.8c20.9-9.5 44.9-7.7 64.2 4.7 19.3 12.4 30.8 33.5 30.8 56.5v647.3c0 22.9-11.5 44.1-30.8 56.5a67.01 67.01 0 0 1-36.5 10.8zM198.4 634.5h66.5c9.6 0 18.9 2 27.7 5.9l353.8 160.5V223.1L292.7 383.6c-8.8 4-18.2 6-27.8 6h-66.5v244.9zM870.4 758.4c-24.7 0-44.8-20.1-44.8-44.8V310.4c0-24.7 20.1-44.8 44.8-44.8 24.7 0 44.8 20.1 44.8 44.8v403.2c0 24.7-20.1 44.8-44.8 44.8z" fill="#ffffff" p-id="8519"></path></svg>
`
videoPlayer.volume = (130 - VolumeValueId.offsetHeight) / 130
volumeValuernumber.innerHTML= parseInt(100*videoPlayer.volume)
}
}
// 单击id名为volumeThreeId的节点时触发事件
volumeContainId.addEventListener('click', volumeFun);
// 音量圆点按下时
VolumeSpotId.addEventListener('mousedown', function(e) {
document.onmousemove = function(e) {
// 设置自定义属性值
VolumeSpotId.setAttribute('data-custom', 'change');
volumeFun(e);
document.ondragstart = function(ev) {
// 阻止默认事件
ev.preventDefault();
};
// 鼠标结束拖动并松开，时触发事件；没啥用，只是样式需要而已
document.ondragend = function(ev) {
// 阻止默认事件
ev.preventDefault();
};
}
// 鼠标松开时触发事件
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
// 如果节点的id名为不为volumeId
if (e.srcElement.id !== 'volumeId') {
// 设置自定义属性值
VolumeSpotId.setAttribute('data-custom', '');
}
};
});
volumeuicon.addEventListener("click",function(){
let nowHeight=VolumeValueId.offsetHeight;
if(videoPlayer.muted){
volumeuicon.innerHTML=`
<svg t="1697422769250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8518" width="24" height="24"><path d="M668.8 902.9c-9.4 0-18.9-2-27.8-6L260 724.1h-84c-37.1 0-67.2-30.1-67.2-67.2V367.1c0-37.1 30.1-67.2 67.2-67.2h84.1l381-172.8c20.9-9.5 44.9-7.7 64.2 4.7 19.3 12.4 30.8 33.5 30.8 56.5v647.3c0 22.9-11.5 44.1-30.8 56.5a67.01 67.01 0 0 1-36.5 10.8zM198.4 634.5h66.5c9.6 0 18.9 2 27.7 5.9l353.8 160.5V223.1L292.7 383.6c-8.8 4-18.2 6-27.8 6h-66.5v244.9zM870.4 758.4c-24.7 0-44.8-20.1-44.8-44.8V310.4c0-24.7 20.1-44.8 44.8-44.8 24.7 0 44.8 20.1 44.8 44.8v403.2c0 24.7-20.1 44.8-44.8 44.8z" fill="#ffffff" p-id="8519"></path></svg>
`
videoPlayer.muted=false
}else{
videoPlayer.name='anserTrue'
videoPlayer.muted=true
volumeuicon.innerHTML=`
<svg t="1697722044520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1777" width="22" height="22"><path d="M128 420.576v200.864h149.12l175.456 140.064V284.288l-169.792 136.288H128z m132.256-64l204.288-163.968a32 32 0 0 1 52.032 24.96v610.432a32 32 0 0 1-51.968 24.992l-209.92-167.552H96a32 32 0 0 1-32-32v-264.864a32 32 0 0 1 32-32h164.256zM752 458.656L870.4 300.8a32 32 0 1 1 51.2 38.4L792 512l129.6 172.8a32 32 0 0 1-51.2 38.4l-118.4-157.856-118.4 157.856a32 32 0 0 1-51.2-38.4l129.6-172.8-129.6-172.8a32 32 0 0 1 51.2-38.4l118.4 157.856z" fill="#ffffff" p-id="1778"></path></svg>
`
}
})
这周总结 这周前几天把样式写完了 后几天在交互二级评论和个人中心 二级评论之前也写过 但当时判断就是直接一股脑写 没有分析 现在用字符串拼接然后判断确实感觉思路清晰了很多
下周学习计划继续学习vue3然后继续交互
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
