原生js实现简单的视频播放控件

​​HTML 5 视频/音频参考手册

如果你打算参考本文，这里所用的视频什么的请自行准备。这里仅建议初学者参考。

 因为主要依靠HTML 5的api，所有也没什么好说的，关于api的使用方法在上面的链接里讲的已经非常清楚了（视频相关事件在上面的链接里有讲）

进度条什么的主要用到mousedown、mousemove和mouseup事件，offsetWidth、offsetLeft等属性，HTML结构就是几个块级元素嵌套在一起。

下载功能的话，这里是通过创建a元素并设置download属性，然后触发a元素进行下载。

效果图（bianxiezhe.com里面没有播放器，仅为美观而添加bianxiezhe.com字样）

视频封面图片：编写者播放器.jpeg（bianxiezhe.com里面没有播放器，仅为美观而添加bianxiezhe.com字样）

 css文件：player.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  color: #555555;
  display: flex;/* 弹性布局 */
  align-items: center;/* 垂直居中 */
  justify-content: center;/* 水平居中 */
  background-color: #333333;
}

main {
  min-width: 900px;
  /* 溢出裁剪 */
  overflow: hidden;
}

.main {
  width: 900px;
  height: 507px;
  position: relative;
  border: 2px solid rgb(29, 29, 29);
}

.mainPro {
  width: 100vw;
  height: 100vh;
  position: fixed;
}

.Loading {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  line-height: 506px;
  font-size: 56px;
  font-weight: bold;
  background-color: rgb(169, 169, 169);
}

video {
  width: 100%;
  height: 100%;
}

.control {
  width: 100%;
  height: 43px;
  padding-top: 6px;
  background-color: rgba(29, 29, 29, 0.95);
  position: absolute;
  top: calc(100% - 49px);
}

.controlPro,
.controlHover {
  width: 100%;
  height: 43px;
  padding-top: 6px;
  background-color: rgba(29, 29, 29, 0.95);
  position: absolute;
  /* 设置动画时间 */
  transition: 0.3s;
  top: 100%;
}

main:hover .controlHover {
  top: calc(100% - 49px);
}

.LoadingBarDiv {
  width: calc(100% + 7.5px);
  height: 12px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: rgb(169, 169, 169);
}

.obtain {
  height: 100%;
  width: 0px;
  /* 设置穿透节点 */
  pointer-events: none;
  /* 设置动画时间 */
  transition: width 0.5s;
  position: absolute;
  background-color: rgb(219, 219, 219);
}

.LoadingBar {
  width: 0px;
  max-width: 100%;
  /* 设置穿透节点 */
  pointer-events: none;
  height: 12px;
  background-color: rgb(99, 99, 99);
}

.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;
}

.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%;
}

.LoadingBar,
.spot,
.spotPro {
  position: relative;
  z-index: 1;
}

.LoadingBarDiv:hover .spot {
  display: block;
}

.time {
  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;
}

.timePro {
  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;
}

.LoadingBarDiv:hover~.time {
  display: block;
}

.ul {
  height: 24px;
  width: 406px;
  margin: 3px;
}

.ul>li {
  background-color: rgb(169, 169, 169);
  color: rgb(32, 32, 32);
  float: left;
  list-style-type: none;
  height: 100%;
  width: 24px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  cursor: default;
  user-select: none;
}

.ul>li+li {
  margin-left: 4px;
}

.ul>li:hover {
  background-color: rgb(219, 219, 219);
}

#timeTextId {
  width: 108px;
}

#speedId {
  width: 70px;
}

#timeTextId,
#speedId,
#volumeId {
  background-color: rgb(169, 169, 169);
}

.SpeedOption {
  width: 70px;
  height: 24px;
  position: absolute;
  margin-top: -149px;
  display: none;
  z-index: 1;
}

#speedId:hover .SpeedOption {
  display: block;
}

.SpeedOption>li {
  width: 100%;
  height: 100%;
  background-color: rgb(169, 169, 169);
  list-style-type: none;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid rgb(32, 32, 32);
}

.SpeedOption>li:hover {
  background-color: rgb(219, 219, 219);
}

.volumeTwo {
  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;
  display: none;
  z-index: 1;
}

.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>.volumeThree,
.volumeTwo>.volumeThree {
  width: 6px;
  height: 130px;
  background-color: rgb(32, 32, 32);
  position: absolute;
}

.volumeThree>.VolumeValue {
  width: 6px;
  height: 0px;
  background-color: #dddddd;
}

.volumeThree>.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));
}

.VolumeText {
  width: 100px;
  height: 24px;
  line-height: 23px;
  margin-left: 15px;
  margin-top: -9px;
  position: absolute;
  background-color: rgb(169, 169, 169);
  border-left: 1px solid rgb(32, 32, 32);
  text-align: center;
  font-weight: bold;
}

input {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0px;
  display: none;
}

label {
  width: 100%;
  height: 100%;
  display: block;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
}

.proposalORreport {
  width: 100px;
  height: 24px;
  line-height: 23px;
  border-radius: 3px;
  position: absolute;
  color: #dddddd;
  top: 0px;
  background-color: rgb(29, 29, 29);
  text-align: center;
  font-weight: bold;
  display: none;
  cursor: default;
  user-select: none;
}

html文件：player.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="icomoon/demo-files/demo.css">
    <link rel="stylesheet" href="icomoon/style.css">
    <link rel="stylesheet" href="./css/player.css">
    <title>播放器</title>
  </head>
  <body>
    <main class="main">
      <div class="Loading" id="LoadingId">加载中</div>
      <video src="#" id="media" poster="编写者播放器.jpeg" data-custom></video>
      <div class="control" id="controlId">
        <div class="LoadingBarDiv" id="LoadingBarDivId">
          <div class="obtain" id="obtainId"></div>
          <div class="LoadingBar"></div>
          <div class="spot"></div>
        </div>
        <div class="time" id="timeId">00:00</div>
        <ul class="ul" id="ulId">
          <li class="icon-stop2 Reset" id="ResetId"></li>
          <li class="icon-play3 playORsuspend" id="playORsuspendId"></li>
          <li class="icon-last next" id="nextId"></li>
          <li class="timeText" id="timeTextId">00:00/00:00</li>
          <li class="speed" id="speedId">
            <span id="SpeedValueId">1.00倍</span>
            <ul class="SpeedOption">
              <li>0.50倍</li>
              <li>0.75倍</li>
              <li>1.00倍</li>
              <li>1.25倍</li>
              <li>1.50倍</li>
            </ul>
          </li>
          <li class="icon-volume-high volume" id="volumeId" data-custom>
            <div class="volumeTwo" id="volumeTwoId">
              <div class="volumeThree" id="volumeThreeId">
                <div class="VolumeValue" id="VolumeValueId"></div>
                <div class="VolumeSpot" id="VolumeSpotId"></div>
              </div>
              <div class="VolumeText" id="VolumeTextId">音量：100%</div>
            </div>
          </li>
          <li class="icon-box-add download" id="downloadId"></li>
          <li class="icon-enlarge2 WebFullScreen" id="WebFullScreenId" data-custom></li>
          <li class="icon-enlarge FullScreen" id="FullScreenId" data-custom></li>
          <li class="dropORstay" id="dropORstayId">
            <label for="choice">降</label>
            <input type="checkbox" id="choice" />
          </li>
        </ul>
      </div>
      <div class="proposalORreport" id="proposalORreportId">建议或举报</div>
    </main>
    <script src="./javascript/player.js"></script>
  </body>
</html>

js文件：player.js

(function() {
  //获取所需操作节点，这里用到的变量名均与id名、标签名、类名其中一个相同
  const LoadingId = document.getElementById("LoadingId"),
    controlId = document.getElementById("controlId"),
    LoadingBarDivId = document.getElementById("LoadingBarDivId"),
    obtainId = document.getElementById("obtainId"),
    timeId = document.getElementById("timeId"),
    ResetId = document.getElementById("ResetId"),
    playORsuspendId = document.getElementById("playORsuspendId"),
    volumeId = document.getElementById("volumeId"),
    nextId = document.getElementById("nextId"),
    timeTextId = document.getElementById("timeTextId"),
    SpeedValueId = document.getElementById("SpeedValueId"),
    VolumeValueId = document.getElementById("VolumeValueId"),
    VolumeSpotId = document.getElementById("VolumeSpotId"),
    VolumeTextId = document.getElementById("VolumeTextId"),
    downloadId = document.getElementById("downloadId"),
    WebFullScreenId = document.getElementById("WebFullScreenId"),
    FullScreenId = document.getElementById("FullScreenId"),
    proposalORreportId = document.getElementById("proposalORreportId"),
    input = document.getElementById('choice'),
    volumeTwoId = document.getElementById('volumeTwoId'),
    body = document.querySelector("body"),
    main = document.querySelector('main'),
    video = document.querySelector('video'),
    LoadingBar = document.querySelector('.LoadingBar'),
    SpeedOption = document.querySelector('.SpeedOption'),
    spot = document.querySelector('.spot'),
    label = document.querySelector('label');

  // 播放名单
  const VideoUrl = {
    media1: '10-12-1.mp4',
    media2: '10-12-3.mp4',
    media3: 'trailer_test.mp4',
    media4: '配乐音量.mp4'
  }
  // 设置video节点的src值，这里采用协议、域名（ip）、端口自适应
  video.src = './Video/' + VideoUrl['media' + Math.floor(Math.random() * (5 - 1) + 1)];

  function enhanceVideoSeek() {
    let minute = 0,
      second = 0,
      VideoMinute = 0,
      VideoSecond = 0;
    // toFixed(1)会四舍五入,parseInt不会
    // 已播放的分钟
    minute = parseInt(video.currentTime % 3600 / 60);
    // 三目运算：小于10则在前面添加0
    minute = minute < 10 ? '0' + minute : minute;
    // 已播放的秒钟
    second = parseInt(video.currentTime % 3600 % 60);
    // 三目运算：小于10则在前面添加0
    second = second < 10 ? '0' + second : second;
    // 总时长的分钟
    VideoMinute = parseInt(video.duration % 3600 / 60);
    // 三目运算：小于10则在前面添加0
    VideoMinute = VideoMinute < 10 ? '0' + VideoMinute : VideoMinute;
    // 总时长的秒钟
    VideoSecond = parseInt(video.duration % 3600 % 60);
    // 三目运算：小于10则在前面添加0
    VideoSecond = VideoSecond < 10 ? '0' + VideoSecond : VideoSecond;
    // 设置对应节点的文本节点
    timeTextId.innerText = minute + ":" + second + "/" + VideoMinute + ":" + VideoSecond;
  }

  // 遍历“倍速”节点，给它的所有字节的设置单击事件
  for (let itme of SpeedOption.children) {
    itme.addEventListener('click', function() {
      // 获取itme文本后截取数字部分转为浮点型并设置视频播放速率
      video.playbackRate = parseFloat(itme.innerText.substring(0, 4));
      // 设置对应节点的文本节点
      SpeedValueId.innerText = itme.innerText;
    });
  }

  function setClassName(ele, removeClass, addClas) {
    // 删除类名
    ele.classList.remove(removeClass);
    // 添加类名
    ele.classList.add(addClas);
  }

  function playPause() {
    // 捕获异常
    try {
      // 如果处于暂停状态则播放，否则暂停
      if (video.paused) {
        video.play(); //播放
        // 设置自定义属性，方便后续操作
        video.setAttribute('data-custom', 'play');
        // 设置“暂停/播放”按键的class属性值，变更其文字图案表现
        // 调用setClassName方法
        setClassName(playORsuspendId, 'icon-play3', 'icon-pause2');
      } else {
        video.pause(); //暂停
        // 设置自定义属性，方便后续操作
        video.setAttribute('data-custom', 'pause');
        // 设置“暂停/播放”按键的class属性值，变更其文字图案表现
        // 调用setClassName方法
        setClassName(playORsuspendId, 'icon-pause2', 'icon-play3');
      }
    } catch (e) {
      console.log('%c出错啦！暂停/播放状态请勿切换过快！！！',
        'background-color:#be191c;color:#f3f3f3;border-radius: 1px;padding:2px 8px;text-align: center;font-weight: bold;'
      );
    }
  }

  function timeFun(e) {
    let minute = 0,
      second = 0;
    // toFixed(1)会四舍五入,parseInt不会
    // 鼠标所指之处的分钟
    minute = parseInt(((e.clientX - main.offsetLeft) / (LoadingBarDivId.offsetWidth - spot.offsetWidth / 2)) *
      video.duration % 3600 / 60);
    // 三目运算：小于10则在前面添加0
    minute = minute < 10 ? '0' + minute : minute;
    // 鼠标所指之处的秒钟
    second = parseInt(((e.clientX - main.offsetLeft) / (LoadingBarDivId.offsetWidth - spot.offsetWidth / 2)) *
      video.duration % 3600 % 60);
    // 三目运算：小于10则在前面添加0
    second = second < 10 ? '0' + second : second;
    // 设置对应节点的文本节点
    timeId.innerText = minute + ":" + second;
    // 计算id名为timeId的节点应该具有的左边距的距离
    let marginLeft = ((e.clientX - main.offsetLeft) - (timeId.offsetWidth / 2));
    if (marginLeft < 0) { // 判断marginLeft的值是否小于0
      // 设置id名为timeId的节点的左边距
      timeId.style.marginLeft = '0px';
    } else if (marginLeft > ((LoadingBarDivId.offsetWidth - spot.offsetWidth / 2) - timeId
        .offsetWidth)) { // 判断marginLeft的值加上id名为timeId的节点的宽度是否大于于进度条容器的宽度
      // 设置id名为timeId的节点的左边距
      timeId.style.marginLeft = (LoadingBarDivId.offsetWidth - spot.offsetWidth / 2) - timeId
        .offsetWidth + 'px';
    } else {
      // 设置id名为timeId的节点的左边距
      timeId.style.marginLeft = marginLeft + 'px';
    }
  }

  function show_coords(e, parameter) {
    // 判断进度条宽度是否超过其容器的宽度
    if (parameter <= controlId.offsetWidth && parameter >= 0) {
      // 设置进度条宽度
      LoadingBar.style.width = parameter + 'px';
      if (e) {
        // 调用timeFun方法
        timeFun(e);
      }
      // 计算进度条宽度与其容器宽度的比例
      let percent = LoadingBar.offsetWidth / (LoadingBarDivId.offsetWidth - spot.offsetWidth / 2);
      // 设置视频播放时间（即播放到哪里了）
      video.currentTime = percent * video.duration;
    }
  }

  function LoadingBarWidthFun(e) {
    // 被单击的如果是进度条上的圆点，则结束这个方法；否则调用show_coords方法
    if (e.target.className === "spot" || e.target.className === "spotPro") return null;
    show_coords(null, e.offsetX);
  };

  // 加载完视频“元数据”后触发loadedmetadata事件
  video.addEventListener("loadedmetadata", function() {
    LoadingBar.style.width = '0px';
    // 调用enhanceVideoSeek方法
    enhanceVideoSeek();
    // 双击video节点时触发事件
    video.addEventListener("dblclick", function() {
      // 调用playPause方法
      playPause();
    });
    // 键盘按下某一个键时触发事件
    document.addEventListener("keydown", function(e) {
      // 如果按下的是空格键
      if (e.keyCode === 32) {
        // 调用playPause方法
        playPause();
      }
    });

    // 隐藏“加载中”提示节点
    LoadingId.style.display = 'none';

    // 单击id名为ResetId的节点时触发事件
    ResetId.addEventListener("click", function() {
      // 设置（归零）视频播放时间（即播放到哪里了）
      video.currentTime = 0;
      obtainId.style.width='0px';
    });

    // 单击id名为playORsuspendId的节点时触发事件
    playORsuspendId.addEventListener("click", playPause);

    // 单击id名为LoadingBarDivId的节点时触发事件
    LoadingBarDivId.addEventListener("click", LoadingBarWidthFun);

    // 单击id名为downloadId的节点时触发事件
    downloadId.addEventListener('click', function() {
      // 通过协议判断是不是只是打开了html文件，而不是在网站上打开页面
      if (!window.location.protocol || window.location.protocol === 'file:') { // 如果是
        return alert('你的文件为本地文件，不能下载');
      } else { // 如果不是
        // 创建a节点
        let a = document.createElement("a"),
          // 获取视频文件名“.”前面的部分
          FileName = window.decodeURIComponent(video.src.substring(video.src.lastIndexOf(
            "/") + 1, video.src.lastIndexOf(".")));
        // 将video节点的src属性值赋值给a节点的href属性
        a.href = video.src;
        // 设置a节点的download属性，该属性值就是下载到本地时的文件名，该属性仅在网站上可用
        a.download = FileName + new Date().getTime() + a.href.substr(a.href.lastIndexOf(
          "."));
        // 添加节点到body节点
        body.appendChild(a);
        // 设置定时器，定时（0.1秒后）删除a节点
        let aSet = setTimeout(function() {
          // 删除a节点
          body.removeChild(a);
          // 移除定时器
          clearTimeout(aSet);
        }, 100);
        // 触发a节点的单击事件
        a.click();
      }
    });

    // 进度条圆点按下时
    spot.addEventListener('mousedown', function(e) {
      video.pause(); // 暂停播放

      // 修改相应节点类名，达到样式需求效果
      spot.className = "spotPro";
      timeId.className = "timePro";

      // 计算鼠标按下时，鼠标相对于进度条圆点的位置，以免抖动
      let xPro = (e.clientX - main.offsetLeft) - (spot.offsetLeft + spot.offsetWidth / 2);

      // 鼠标移动时触发
      document.onmousemove = function(e) {
        // 移除进度条容器的单击事件
        LoadingBarDivId.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;
        // 给进度条容器绑定单击事件
        LoadingBarDivId.addEventListener("click", LoadingBarWidthFun);
        // 修改相应节点类名，达到样式需求效果
        spot.className = "spot";
        timeId.className = "time";
        // 通过自定义属性判断拖动进度条前的播放状态，决定播放还是暂停
        if (video.getAttribute('data-custom') === "play") {
          video.play(); //播放
        } else if (video.getAttribute('data-custom') === "pause") {
          video.pause(); //暂停
        }
      };
    });

    // 鼠标进入在进度条时触发事件
    LoadingBarDivId.addEventListener('mousemove', function(e) {
      // 如果节点的id名为不为timeId
      if (e.target.id != 'timeId') {
        // 调用timeFun方法
        timeFun(e);
      }
    });
  });

  // 视频播放时间变化时触发事件
  video.addEventListener("timeupdate", function(e) {
    // 计算已播放时间和总时长的比例
    let ratio = video.currentTime / video.duration;
    // 计算并设置进度条长度
    LoadingBar.style.width = (LoadingBarDivId.offsetWidth - 7.5) * ratio + 'px';
    // 调用enhanceVideoSeek方法
    enhanceVideoSeek();
    // 判断已缓冲数据长度是否大于零
    if (video.buffered.length > 0) {
      // 计算已缓冲视频提示条长度
      let obtainWidth = (video.buffered.end(video.buffered.length - 1) / video.duration) *
        LoadingBarDivId.offsetWidth;
      // 设置已缓冲视频提示条长度
      obtainId.style.width = obtainWidth + "px";
    }
  });

  // 单击id名为nextId的节点时触发事件
  nextId.addEventListener('click', function() {
    // 获取视频路径，这里采用协议、域名（ip）、端口自适应
    let src = './Video/' + VideoUrl['media' + Math.floor(Math.random() * (5 - 1) + 1)];
    // 获取video节点src属性相对应部分（中文有需要window.decodeURIComponent解码）
    VideoName = window.decodeURIComponent(video.src.substr(video.src.lastIndexOf("/") + 1));
    if (src !== './Video/' + VideoName) { // 如果不同
      try {
        video.removeAttribute('src');
        obtainId.style.width='0px';
        // 设置video节点的src值
        video.src = src;
        // 通过自定义属性判断拖动进度条前的播放状态，决定播放还是暂停
        video.playbackRate = parseFloat(SpeedValueId.innerText.substring(0, 4));
        if (video.getAttribute('data-custom') === "play") {
          video.play(); // 播放
        } else if (video.getAttribute('data-custom') === "pause") {
          video.pause(); // 暂停
        }
      } catch (e) {
        console.log(e)
      }
    } else { // 如果相同
      // 触发id名为nextId的节点的单击事件
      nextId.click();
    }
  });

  // 单击id名为volumeId的节点时触发事件
  volumeId.addEventListener('click', function(e) {
    // 阻止事件冒泡
    e.stopPropagation();
    // 如果节点的id名为为volumeId
    if (e.srcElement.id === 'volumeId') {
      // 如果自定义属性值不存在或为空
      if (!volumeId.getAttribute('data-custom')) {
        // 调用setClassName方法
        setClassName(volumeId, 'icon-volume-high', 'icon-volume-mute2');
        // 设置自定义属性值
        volumeId.setAttribute('data-custom', 'Mute');
        // 设置视频音量为0
        video.volume = 0;
        // 修改音量提示块的文本信息
        VolumeTextId.innerText = '音量：静音';
      } else if (volumeId.getAttribute('data-custom') !== "change") {
        // 调用setClassName方法
        setClassName(volumeId, 'icon-volume-mute2', 'icon-volume-high');
        // 设置自定义属性值
        volumeId.setAttribute('data-custom', '');
        // 计算并设置视频音量
        video.volume = (124 - VolumeValueId.offsetHeight) / 124;
        // 修改音量提示块的文本信息
        VolumeTextId.innerText = '音量：' + ((124 - VolumeValueId.offsetHeight) / 124 * 100)
          .toFixed(0) + '%';
      } else {
        // 设置自定义属性值
        volumeId.setAttribute('data-custom', '');
      }
    }
  });

  function volumeFun(e) {
    // 判断e是否为空，如果为空就设置它
    e = e || document;
    // 计算y的值
    let y = e.clientY - controlId.offsetTop - (VolumeSpotId.offsetHeight / 2);
    // 判断y的值是否符合要求并设置id名为VolumeValueId的节点的高度
    if (y >= 0 && y <= 124) {
      VolumeValueId.style.height = y + 'px';
    } else if (y > 124) {
      VolumeValueId.style.height = '124px';
    } else {
      VolumeValueId.style.height = '0px';
    }
    // 设置id名为VolumeTextId的节点的上边距
    VolumeTextId.style.marginTop = (VolumeValueId.offsetHeight - 9) + 'px';
    // 计算并设置视频音量
    video.volume = (124 - VolumeValueId.offsetHeight) / 124;
    // 判断是否处于静音状态，如果不是
    if (!volumeId.getAttribute('data-custom') || volumeId.getAttribute('data-custom') === "change") {
      // 修改音量提示块的文本信息
      VolumeTextId.innerText = '音量：' + ((124 - VolumeValueId.offsetHeight) / 124 * 100).toFixed(0) + '%';
    }
  }

  // 单击id名为volumeThreeId的节点时触发事件
  volumeThreeId.addEventListener('click', volumeFun);

  // 音量圆点按下时
  VolumeSpotId.addEventListener('mousedown', function(e) {
    // 修改相应节点类名，达到样式需求效果
    volumeTwoId.className = "volumeTwoPro";
    // 鼠标移动时触发
    document.onmousemove = function(e) {
      // 设置自定义属性值
      volumeId.setAttribute('data-custom', 'change');
      // 调用volumeFun方法
      volumeFun(e);
      // 鼠标按下开始拖动，时触发事件；没啥用，只是样式需要而已
      document.ondragstart = function(ev) {
        // 阻止默认事件
        ev.preventDefault();
      };
      // 鼠标结束拖动并松开，时触发事件；没啥用，只是样式需要而已
      document.ondragend = function(ev) {
        // 阻止默认事件
        ev.preventDefault();
      };
    }

    // 鼠标松开时触发事件
    document.onmouseup = function(e) {
      // 修改相应节点类名，达到样式需求效果
      volumeTwoId.className = "volumeTwo";
      // 移除相应事件
      document.onmousemove = null;
      document.onmouseup = null;
      // 如果节点的id名为不为volumeId
      if (e.srcElement.id !== 'volumeId') {
        // 设置自定义属性值
        volumeId.setAttribute('data-custom', '');
      }
    };
  });

  function isFullscreenForNoScroll(e) {
    // 如果节点的id名为为FullScreenId
    if (e.srcElement.id === "FullScreenId") {
      // 如果自定义属性值不存在或为空
      if (!e.srcElement.getAttribute('data-custom')) {
        // 设置main节点全屏
        main.webkitRequestFullscreen();
        // 调用setClassName方法
        setClassName(e.srcElement, 'icon-enlarge', 'icon-shrink');
        // 设置自定义属性值
        e.srcElement.setAttribute('data-custom', 'FullScreenId');
        // 移除main节点的相应事件
        main.onmousemove = null;
        // 给main节点的mousemove事件
        main.onmousemove = function() {
          // 修改鼠标样式
          video.style.cursor = "auto";
          // 判断多选框是否被选中
          if (input.checked === true) { // 被选中
            // 修改相应节点类名，达到样式需求效果
            controlId.className = 'controlHover';
          } else { // 不被选中
            // 修改相应节点类名，达到样式需求效果
            controlId.className = 'control';
          }
          // 设置定时器
          let timer = setTimeout(function() {
            // 如果自定义属性值存在且不为空
            if (FullScreenId.getAttribute('data-custom')) {
              // 判断多选框是否被选中
              if (input.checked === true) { // 被选中
                // 修改相应节点类名，达到样式需求效果
                controlId.className = 'controlPro';
              }
              // 修改鼠标样式
              video.style.cursor = "none";
              // 移除定时器
              clearTimeout(timer);
              timer = null;
            }
          }, 10000);
        }
      } else {
        // 退出全屏
        document.exitFullscreen();
        // 调用setClassName方法
        setClassName(e.srcElement, 'icon-shrink', 'icon-enlarge');
        // 设置自定义属性值
        e.srcElement.setAttribute('data-custom', '');
      }
    } else {
      if (FullScreenId.getAttribute('data-custom')) {
        // 退出全屏
        document.exitFullscreen();
        // 调用setClassName方法
        setClassName(FullScreenId, 'icon-shrink', 'icon-enlarge');
        // 设置自定义属性值
        FullScreenId.setAttribute('data-custom', '');
      }
      if (!e.srcElement.getAttribute('data-custom')) {
        // 修改相应节点类名，达到样式需求效果
        main.className = "mainPro";
        // 调用setClassName方法
        setClassName(e.srcElement, 'icon-enlarge2', 'icon-shrink2');
        // 设置自定义属性值
        e.srcElement.setAttribute('data-custom', 'WebFullScreenId');
      } else {
        // 修改相应节点类名，达到样式需求效果
        main.className = "main";
        // 调用setClassName方法
        setClassName(e.srcElement, 'icon-shrink2', 'icon-enlarge2');
        // 设置自定义属性值
        e.srcElement.setAttribute('data-custom', '');
      }
    }
  }

  // 单击id名为WebFullScreenId的节点时触发事件
  WebFullScreenId.addEventListener('click', isFullscreenForNoScroll);

  // 单击id名为FullScreenId的节点时触发事件
  FullScreenId.addEventListener('click', isFullscreenForNoScroll);

  // 多选框的值发生变化时触发事件
  input.addEventListener('change', function() {
    // 判断多选框是否被选中
    if (input.checked === true) { // 被选中
      // 修改对应节点的文本信息
      label.innerText = '留';
      // 修改相应节点类名，达到样式需求效果
      controlId.className = 'controlHover';
    } else { // 不被选中
      // 修改对应节点的文本信息
      label.innerText = '降';
      // 修改相应节点类名，达到样式需求效果
      controlId.className = 'control';
    }
  });

  // 右击时触发该事件
  document.addEventListener('contextmenu', function(e) {
    // 判断被右击的元素的id是否符合要求
    if (e.target.id === 'media' || e.target.id === 'proposalORreportId') {
      // 阻止默认事件
      e.preventDefault();
      // 判断被右击的元素的id是否为media同时是否处于非全屏状态
      if (e.target.id === 'media' && !FullScreenId.getAttribute('data-custom')) {
        // 计算x的值
        let x = e.target.offsetWidth - proposalORreportId.offsetWidth;
        // 判断鼠标的x坐标是否小于等于x
        if (e.offsetX <= x) { //如果小于等于x
          // 赋值x等于e.offsetX
          x = e.offsetX;
        }
        // 计算y的值
        let y = e.target.offsetHeight - controlId.offsetHeight - proposalORreportId.offsetHeight;
        // 判断鼠标的y坐标是否小于等于y
        if (e.offsetY <= y) { // 如果小于等于y
          // 赋值y等于e.offsetY
          y = e.offsetY;
        }
        // 设置id为proposalORreportId的节点的样式
        proposalORreportId.style.cssText = 'display:block;top:' + y + 'px;left:' + x + 'px';
      }
    }
  });

  document.addEventListener('click', function(e) {
    if (e.target.id === 'proposalORreportId') {
      alert('我们一概不接受建议和举报！！！');
    } else {
      proposalORreportId.style.display = 'none';
    }
  });

  video.addEventListener("ended", function() { // 当视频由于结束而停止
    // 设置自定义属性值
    video.setAttribute('data-custom', '');
    // 调用setClassName方法
    setClassName(playORsuspendId, 'icon-pause2', 'icon-play3');
  });

  // video.addEventListener("seeking", function() {// 当用户开始移动/跳跃到音频/视频中的新位置时
  //  LoadingId.style.display = 'block';
  // });

  // video.addEventListener("seeked", function() {// 当用户已移动/跳跃到音频/视频中的新位置时
  //  LoadingId.style.display = 'none';
  // });

  video.addEventListener("waiting", function() { // 当视频由于需要缓冲下一帧而停止
    LoadingId.style.display = 'block';
  });

  video.addEventListener("playing", function() { // 当音频/视频在已因缓冲而暂停或停止后已就绪时
    LoadingId.style.display = 'none';
  });

})();

bianxiezhe.com里面没有播放器，请不要因为播放器而前往bianxiezhe.com

​​欢迎前往我的个人小站，在那里可以获取免费的资源，大概会有本文的资源（功能未完善；仅做宣传，不建议前往）