原生js实现视频播放器

原生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>
                                                <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=`
            
            `
        } else {
            console.log("暂停");
            videoPlayer.pause();
            videoPlayer.setAttribute('data-custom', 'pause');
            changePlayAndPause.innerHTML=`
            
     `
        }
    } 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=`
            
            `
        }else{
                document.exitFullscreen();
                FullScreenId.innerHTML=`
                 
              `  
        }
}
// 单击id名为WebFullScreenId的节点时触发事件

FullScreenId.addEventListener('click', isFullscreenForNoScroll);
//监听窗口变化
window.onresize = function () {
    if (!document.fullscreenElement) {
        FullScreenId.innerHTML=`
              
           `  
        }
}
// 音量
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=`
            
            `
            videoPlayer.volume = (130 - VolumeValueId.offsetHeight) / 130
            volumeValuernumber.innerHTML= parseInt(100*videoPlayer.volume)
        }
        else{
            volumeValuernumber.innerHTML=0;
            videoPlayer.volume =0
            volumeuicon.innerHTML=`
            
            `
        }
    }
    else{
        volumeuicon.innerHTML=`
        
        `
        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=`
        
        `
        videoPlayer.muted=false
    }else{
        videoPlayer.name='anserTrue'
        videoPlayer.muted=true
        volumeuicon.innerHTML=`
        
        `
    }
})

这周总结 这周前几天把样式写完了 后几天在交互二级评论和个人中心 二级评论之前也写过 但当时判断就是直接一股脑写 没有分析 现在用字符串拼接然后判断确实感觉思路清晰了很多
下周学习计划继续学习vue3然后继续交互