前端自定义播放器

最新推荐文章于 2024-03-26 17:00:52 发布

韩飞扬婉

最新推荐文章于 2024-03-26 17:00:52 发布

阅读量989

点赞数

文章标签：前端 css css3 javascript html

本文链接：https://blog.csdn.net/weixin_45867761/article/details/123438996

版权

自定义播放器

默认的播放器在不同浏览器显示的不一样，所以需要自己写一个播放器以达成统一。

html部分

<div class="player-wrapper" ref="playerWrapper">
            <video ref="video">
              <source src="movie.mp4" type="video/mp4" />
              <source src="movie.ogg" type="video/ogg" />
              <source src="movie.webm" type="video/webm" />
              <object data="movie.mp4" width="320" height="240">
                <embed src="movie.swf" width="320" height="240" />
              </object>
              您的浏览器不支持视频标签。点击这里下载视频：<a
                href="./MIU404_EP_01_ChineseSubbed.mp4"
                >下载视频</a
              >
            </video>
            <div class="control-content">
              <div class="feedback" @click="feedback()">
                <i class="fas fa-question-circle"></i>
                <div class="feedbacktext">
                  <span>反馈</span>
                </div>
              </div>
              <div class="play-btn">
                <!-- <i class="fas fa-pause"></i> -->
                <i class="fab fa-youtube"></i>
              </div>
              <div class="time-box">
                <span>快进5秒</span>
              </div>
              <div class="sound-box">
                <span>音量100%</span>
              </div>
            </div>
            <div class="control-wrapper" ref="control">
              <div class="control-top">
                <div class="progress" ref="progress">
                  <div class="wrap" ref="wrap">
                    <div class="inner" ref="inner"></div>
                  </div>
                  <div class="wrap2" ref="wrap2"></div>
                  <div class="timetext" ref="timetext">
                    <span class="text" ref="text">00:00</span>
                    <i class="fas fa-caret-down"></i>
                  </div>
                </div>
              </div>
              <div class="control-bottom">
                <div class="left">
                  <div class="btns">
                    <span class="start fas fa-play" ref="play">
                      <!-- <i class="fas fa-play"></i> -->
                      <!-- <i class="fas fa-pause"></i> -->
                    </span>
                    <span class="next" @click="categoryStyle(ind + 1)">
                      <i class="fas fa-step-forward"></i>
                    </span>
                  </div>
                  <div class="time">
                    <span class="now" ref="nowTime">00:00</span
                    >&nbsp;/&nbsp;<span class="all" ref="allTime">00:00</span>
                  </div>
                </div>

                <div class="others">
                  <div class="sound">
                    <div class="switch" ref="soundSwitch">
                      <span
                        class="iconfont icon-24gf-volumeHigh"
                        ref="soundSwitchSpan"
                      >
                      </span>
                      <!-- <span class="iconfont icon-24gf-volumeDisable">静音</span> -->
                      <!-- <span class="iconfont icon-24gf-volumeLow">小音量</span> -->
                      <!-- <span class="iconfont icon-24gf-volumeMiddle">中音量</span> -->
                    </div>
                    <div class="sound-progress" ref="sound_progress">
                      <div class="wrap">
                        <div class="inner" ref="sound_inner"></div>
                      </div>
                      <div class="wrap2" ref="sound_wrap2"></div>
                    </div>
                  </div>
                  <div class="full-screen" ref="fullScreen">
                    <span class="fas fa-expand" ref="fullScreenSpan">
                      <!-- <i class="fas fa-expand"></i> -->
                    </span>
                    <!-- <span>
                                            <i class="fas fa-compress"></i>
                                        </span> -->
                  </div>
                </div>
              </div>
            </div>

css部分

.player-wrapper {
      width: 880px;
      height: 600px;
      /* border: 1px solid black; */
      background-color: rgb(15, 15, 15);
      border-radius: 5px;
      position: relative;
      .control-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* background-color: azure; */
        z-index: 1;
        .time-box {
          width: 100px;
          height: 50px;
          background-color: rgb(112, 112, 112);
          border-radius: 10px;
          text-align: center;
          color: #fff;
          font-size: 20px;
          line-height: 50px;
          margin: auto;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: none;
        }
        .sound-box {
          width: 100px;
          height: 20px;
          background-color: rgb(112, 112, 112);
          border-radius: 10px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          line-height: 20px;
          position: absolute;
          bottom: 55px;
          left: 10px;
          display: none;
        }
        .play-btn {
          width: 80px;
          height: 80px;
          color: #fff;
          text-align: center;
          line-height: 80px;
          background-color: rgb(112, 112, 112);
          position: absolute;
          right: 10px;
          bottom: 55px;
          border-radius: 50%;
          font-size: 50px;
          display: none;
        }
        .feedback {
          position: absolute;
          right: 10px;
          top: 5px;
          font-size: 25px;
          color: #fff;
        }

        .feedback:hover {
          cursor: pointer;
        }

        .feedback:hover .feedbacktext {
          display: block;
        }

        .feedbacktext {
          width: 40px;
          height: 20px;
          font-size: 14px;
          border-radius: 5px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          background-color: #999;
          display: none;
          position: absolute;
          bottom: -20px;
          left: -8px;
        }
      }
      .control-wrapper {
        /* height: 80px; */
        // opacity: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        /* position: relative; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        bottom: 0;
        z-index: 2;
        .control-top {
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;
          /* position: relative; */
          margin-bottom: 5px;
          .progress {
            width: 100%;
            height: 3px;
            /* background-color: brown; */
            /* margin: 0 230px 0 55px; */
            position: relative;
            .wrap {
              position: absolute;
              width: 100%;
              height: 3px;
              background-color: rgba(0, 0, 0, 0.1);
              top: 0;
              /* transform: translateY(-50%); */
              .inner {
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background-color: #fff;
                border: 1px solid green;
                margin-top: -3px;
                position: absolute;
                /* display: none; */
                z-index: 1;
              }
            }
            .wrap2 {
              position: absolute;
              height: 3px;
              top: 0;
              background-color: green;
              width: 0px;
            }
            &:hover {
              /* height: 4px; */
              cursor: pointer;
            }
          }
          .timetext {
            width: 30px;
            height: 30px;
            /* background-color: yellow; */
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: absolute;
            color: #fff;
            font-size: 12px;
            left: -15px;
            top: -33px;
            display: none;
            i {
              color: #03a0d6;
            }
          }
          &:hover .timetext {
            display: block;
          }
        }
        .control-bottom {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
          .left {
            display: flex;
            align-items: center;
            .time {
              width: 100px;
              line-height: 25px;
              font-size: 14px;
              color: #fff;
              text-align: center;
              span {
                font-size: 14px;
                color: #fff;
              }
            }
            .btns {
              width: 60px;
              height: 40px;
              /* line-height: 40px; */
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 10px;
              span {
                display: inline-block;
                margin-left: 5px;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
              }
            }
          }
          .others {
            width: 150px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .sound {
              display: flex;
              align-items: center;
              .switch {
                width: 20px;
                margin-right: 5px;
                span {
                  display: inline-block;
                  font-size: 20px;
                  color: #fff;
                  cursor: pointer;
                }
              }
              .sound-progress {
                width: 80px;
                height: 25px;
                position: relative;
                .wrap {
                  position: absolute;
                  width: 100%;
                  height: 3px;
                  background-color: #727272;
                  top: 50%;
                  transform: translateY(-50%);
                  .inner {
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                    background-color: #fff;
                    border: 1px solid green;
                    margin-top: -4px;
                    position: absolute;
                    cursor: pointer;
                  }
                }
                .wrap2 {
                  position: absolute;
                  height: 3px;
                  top: 50%;
                  transform: translateY(-50%);
                  background-color: green;
                  width: 0;
                }
              }
            }
            .full-screen {
              width: 30px;
              margin-left: 10px;
              span {
                display: inline-block;
                margin-left: 5px;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
              }
            }
          }
        }

js部分

function video() {
  var playerWrapper = document.querySelector(".course-content>.player-wrapper");
  var video = document.querySelector(".player-wrapper>video");
  var control = document.querySelector(".player-wrapper>.control-wrapper");

  var controlContent = document.querySelector(
    ".player-wrapper>.control-content"
  );
  var timeBox = document.querySelector(
    ".player-wrapper>.control-content>.time-box"
  );
  var timeBoxSpan = document.querySelector(
    ".player-wrapper>.control-content>.time-box>span"
  );
  var soundBox = document.querySelector(
    ".player-wrapper>.control-content>.sound-box"
  );
  var soundBoxSpan = document.querySelector(
    ".player-wrapper>.control-content>.sound-box>span"
  );
  var playBtn = document.querySelector(
    ".player-wrapper>.control-content>.play-btn"
  );

  var progress = document.querySelector(".progress");
  var inner = document.querySelector(".progress>.wrap>.inner");
  var wrap = document.querySelector(".progress>.wrap");
  var wrap2 = document.querySelector(".progress>.wrap2");
  var timetext = document.querySelector(".progress>.timetext");
  var text = document.querySelector(".timetext>.text");
  var sound_progress = document.querySelector(".others>.sound>.sound-progress");
  var sound_inner = document.querySelector(
    ".others>.sound>.sound-progress>.wrap>.inner"
  );
  var sound_wrap2 = document.querySelector(
    ".others>.sound>.sound-progress>.wrap2"
  );
  var play = document.querySelector(".btns>.start");
  var nowTime = document.querySelector(".time>.now");
  var allTime = document.querySelector(".time>.all");
  var soundSwitch = document.querySelector(".others>.sound>.switch");
  var soundSwitchSpan = document.querySelector(".others>.sound>.switch>span");
  var fullScreen = document.querySelector(".others>.full-screen");
  var fullScreenSpan = document.querySelector(".others>.full-screen>span");

  // 禁止鼠标右键事件
  playerWrapper.oncontextmenu = function(){
    return false;
} 

  video.width = playerWrapper.clientWidth;
  video.height = playerWrapper.clientHeight;
  // window.onresize = function() {
  //         if (document.documentElement.clientWidth >= 300) {
  //             video.width = window.screen.width;
  //             video.height = window.screen.height;
  //         }
  //     }
  // console.log(progress.offsetLeft)

  // 鼠标移入移出
  // playerWrapper.onmousemove = function() {
  //     control.style.opacity = "1"
  // }
  // playerWrapper.onmouseout = function() {
  //     control.style.opacity = "0"
  // }

  // 视频的暂停播放功能
  wrap2.style.width = 0 + "px";
  if (video.paused) {
    //暂停-->播放-->显示暂停按钮
    removeClass(play, "fa-play");
    addClass(play, "fa-pause");
    playBtn.style.display = "none";
    video.play();
    timer = setInterval(move, 1);
  } else {
    //播放-->暂停-->显示播放按钮
    removeClass(play, "fa-pause");
    addClass(play, "fa-play");
    playBtn.style.display = "block";
    video.pause();
    clearInterval(timer);
  }
  var timer = 0; //定义一个时间戳，用于定时器功能
  var flag = 1; //同步音量
  var isFullScreen = false; //全屏标志
  var wrapperWidth = playerWrapper.clientWidth;
  var wrapperHeight = playerWrapper.clientHeight;
  var retime = 0;
  function checkIsFullScreen() {
    var isFullScreen =
      document.fullscreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    return isFullScreen == undefined ? false : isFullScreen;
  }
  player();
  document.addEventListener("fullscreenchange", () => {
    if (checkIsFullScreen()) {
      // console.log("进入全屏");
      isFullScreen = true;
    } else {
      // console.log("退出全屏");
      isFullScreen = false;
      removeClass(fullScreenSpan, "fa-compress");
      addClass(fullScreenSpan, "fa-expand");
      video.width = wrapperWidth;
      video.height = wrapperHeight;
    }
  });
  document.onkeydown = function (event) {
    event = event || window.event;
    if (event.keyCode == 32) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        window.event.returnValue = false;
      }
      if (video.paused) {
        //暂停-->播放-->显示暂停按钮
        removeClass(play, "fa-play");
        addClass(play, "fa-pause");
        playBtn.style.display = "none";
        video.play();
        timer = setInterval(move, 1);
      } else {
        //播放-->暂停-->显示播放按钮
        removeClass(play, "fa-pause");
        addClass(play, "fa-play");
        playBtn.style.display = "block";
        video.pause();
        clearInterval(timer);
      }
    } else if (event.keyCode == 37) {
      retime++;
      video.currentTime -= 5;
      move();
    } else if (event.keyCode == 39) {
      retime++;
      video.currentTime += 5;
      move();
    } else if (event.keyCode == 38) {
      if (isFullScreen) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          window.event.returnValue = false;
        }
        if (video.volume >= 0 && video.volume <= 1) {
          if (video.volume >= 0.9 && video.volume <= 1) {
            video.volume = 1;
          } else {
            video.volume += 0.1;
          }
        }
      }
    } else if (event.keyCode == 40) {
      if (isFullScreen) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          window.event.returnValue = false;
        }
        if (video.volume >= 0 && video.volume <= 1) {
          if (video.volume >= 0 && video.volume <= 0.1) {
            video.volume = 0;
          } else {
            video.volume -= 0.1;
          }
        }
      }
    } else if (event.keyCode == 27) {
      // removeClass(fullScreenSpan, "fa-compress");
      // addClass(fullScreenSpan, "fa-expand");
      // isFullScreen = false;
      // if (document.exitFullscreen) {
      //   document.exitFullscreen();
      // } else if (document.mozCancelFullScreen) {
      //   document.mozCancelFullScreen();
      // } else if (document.webkitCancelFullScreen) {
      //   document.webkitCancelFullScreen();
      // } else if (document.msExitFullscreen) {
      //   document.msExitFullscreen();
      // }
      // video.width = wrapperWidth;
      // video.height = wrapperHeight;
    }
    // return false;
  };

  function move() {
    inner.style.left = wrap2.style.width =
      (video.currentTime / video.duration) * progress.clientWidth -
      inner.offsetWidth / 2 +
      "px";
    nowTime.innerHTML = changeTime(video.currentTime);
  }
  document.onkeyup = function (event) {
    event = event || window.event;
    if (event.keyCode == 39) {
      timeBox.style.display = "block";
      timeBoxSpan.innerHTML = "快进" + retime * 5 + "秒";
      setTimeout(function () {
        timeBox.style.display = "none";
      }, 500);
      retime = 0;
    } else if (event.keyCode == 37) {
      timeBox.style.display = "block";
      timeBoxSpan.innerHTML = "后退" + retime * 5 + "秒";
      setTimeout(function () {
        timeBox.style.display = "none";
      }, 500);
      retime = 0;
    } else if (event.keyCode == 38) {
      if (isFullScreen) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          window.event.returnValue = false;
        }
        sound_inner.style.left = sound_wrap2.style.width =
          (sound_progress.clientWidth - sound_inner.offsetWidth) *
            video.volume +
          "px";
        soundBox.style.display = "block";
        soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
        setTimeout(function () {
          soundBox.style.display = "none";
        }, 500);
      }
    } else if (event.keyCode == 40) {
      if (isFullScreen) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          window.event.returnValue = false;
        }
        sound_inner.style.left = sound_wrap2.style.width =
          (sound_progress.clientWidth - sound_inner.offsetWidth) *
            video.volume +
          "px";
        soundBox.style.display = "block";
        soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
        setTimeout(function () {
          soundBox.style.display = "none";
        }, 500);
      }
    }
  };

  function player() {
    controlContent.onclick = function () {
      if (video.paused) {
        //暂停-->播放-->显示暂停按钮
        removeClass(play, "fa-play");
        addClass(play, "fa-pause");
        playBtn.style.display = "none";
        video.play();
        timer = setInterval(move, 1);
      } else {
        //播放-->暂停-->显示播放按钮
        removeClass(play, "fa-pause");
        addClass(play, "fa-play");
        playBtn.style.display = "block";
        video.pause();
        clearInterval(timer);
      }
    };
    // 播放按钮
    play.onclick = function () {
      if (video.paused) {
        //暂停-->播放-->显示暂停按钮
        removeClass(play, "fa-play");
        addClass(play, "fa-pause");
        playBtn.style.display = "none";
        video.play();
        timer = setInterval(move, 1);
      } else {
        //播放-->暂停-->显示播放按钮
        removeClass(play, "fa-pause");
        addClass(play, "fa-play");
        playBtn.style.display = "block";
        video.pause();
        clearInterval(timer);
      }
    };

    // 视频进度条功能
    progress.onclick = function (event) {
      event = event || window.event;
      removeClass(play, "fa-play");
      addClass(play, "fa-pause");
      playBtn.style.display = "none";
      video.play();
      timer = setInterval(move, 100);
      // 修改当前时间
      video.currentTime =
        video.duration *
        ((event.clientX - playerWrapper.offsetLeft - progress.offsetLeft) /
          progress.clientWidth);
    };

    wrap.onmousemove = function (event) {
      event = event || window.event;
      var hoverLong =
        event.clientX - playerWrapper.offsetLeft - progress.offsetLeft;
      var hoverTime = video.duration * (hoverLong / progress.clientWidth);
      if (hoverLong <= 0) {
        hoverTime = 0;
      } else if (hoverLong >= progress.clientWidth - 1) {
        hoverTime = video.duration;
      }
      timetext.style.left =
        (hoverTime / video.duration) * progress.clientWidth -
        timetext.offsetWidth / 2 +
        "px";
      // console.log(timetext.style.left)
      var left = parseInt(timetext.style.left);
      // console.log(left)
      if (left <= -15) {
        timetext.style.left = -15 + "px";
      } else if (left >= progress.clientWidth) {
        timetext.style.left =
          progress.clientWidth - timetext.offsetWidth / 2 + "px";
      }
      hoverTime = changeTime(hoverTime);
      // console.log(hoverTime)
      text.innerHTML = hoverTime;
      // timetext.style.display = "block"
    };

    wrap2.onmousemove = function (event) {
      event = event || window.event;
      var hoverLong =
        event.clientX - playerWrapper.offsetLeft - progress.offsetLeft;
      var hoverTime = video.duration * (hoverLong / progress.clientWidth);
      if (hoverLong <= 0) {
        hoverTime = 0;
      } else if (hoverLong >= progress.clientWidth - 1) {
        hoverTime = video.duration;
      }
      timetext.style.left =
        (hoverTime / video.duration) * progress.clientWidth -
        timetext.offsetWidth / 2 +
        "px";
      // console.log(timetext.style.left)
      var left = parseInt(timetext.style.left);
      // console.log(left)
      if (left <= -15) {
        timetext.style.left = -15 + "px";
      } else if (left >= progress.clientWidth) {
        timetext.style.left =
          progress.clientWidth - timetext.offsetWidth / 2 + "px";
      }
      hoverTime = changeTime(hoverTime);
      // console.log(hoverTime)
      text.innerHTML = hoverTime;
      // timetext.style.display = "block"
    };

    function move() {
      inner.style.left = wrap2.style.width =
        (video.currentTime / video.duration) * progress.clientWidth -
        inner.offsetWidth / 2 +
        "px";
      nowTime.innerHTML = changeTime(video.currentTime);
    }

    // 时间的显示
    video.addEventListener("loadedmetadata", function () {
      // console.log(video.duration);
      allTime.innerHTML = changeTime(video.duration);
    });
    video.addEventListener("loadeddata", function () {
      // console.log(video.duration);
      allTime.innerHTML = changeTime(video.duration);
    });

    //音量按钮
    sound_inner.style.left = sound_wrap2.style.width =
      (sound_progress.clientWidth - sound_inner.offsetWidth) * video.volume +
      "px";
    soundSwitch.onclick = function () {
      if (video.muted) {
        //静音 ---> 不静音 ---> 没有/的那个
        video.muted = false;
        flag = flag == 0 ? 1 : flag;
        video.volume = flag;
        if (video.volume > 0 && video.volume <= 0.3) {
          removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
          removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
          removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
          addClass(soundSwitchSpan, "icon-24gf-volumeLow");
          video.muted = false;
        } else if (video.volume > 0.3 && video.volume <= 0.6) {
          removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
          removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
          removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
          addClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
          video.muted = false;
        } else {
          removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
          removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
          removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
          addClass(soundSwitchSpan, "icon-24gf-volumeHigh");
          video.muted = false;
        }
        sound_inner.style.left = sound_wrap2.style.width =
          (sound_progress.clientWidth - sound_inner.offsetWidth) * flag + "px";
        soundBox.style.display = "block";
        soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
        setTimeout(function () {
          soundBox.style.display = "none";
        }, 500);
      } else {
        //不静音 ---> 静音 ---> 有/的那个
        video.muted = true;
        video.volume = 0;
        removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
        removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
        removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
        addClass(soundSwitchSpan, "icon-24gf-volumeDisable");
        sound_inner.style.left = sound_wrap2.style.width = 0 + "px";
        soundBox.style.display = "block";
        soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
        setTimeout(function () {
          soundBox.style.display = "none";
        }, 500);
      }
    };

    //全屏
    fullScreen.onclick = function () {
      if (isFullScreen) {
        // 全屏 ---> 不是全屏
        removeClass(fullScreenSpan, "fa-compress");
        addClass(fullScreenSpan, "fa-expand");
        isFullScreen = false;
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        video.width = wrapperWidth;
        video.height = wrapperHeight;
      } else {
        removeClass(fullScreenSpan, "fa-expand");
        addClass(fullScreenSpan, "fa-compress");
        isFullScreen = true;
        var docElm = playerWrapper;
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
        video.width = window.screen.width;
        video.height = window.screen.height;
      }
    };
  }

  // 视频进度条
  var callback = {
    //回调机制
    move: function () {
      wrap2.style.width = this.offsetLeft + "px";
      var scale = this.offsetLeft / (progress.clientWidth - inner.offsetWidth);
      video.currentTime = video.duration * scale;
      nowTime.innerHTML = changeTime(video.currentTime);
    },
  };
  drag(inner, callback);

  // 音量进度条
  var callback2 = {
    //回调机制
    move: function () {
      sound_wrap2.style.width = this.offsetLeft + "px";
      var scale =
        this.offsetLeft /
        (sound_progress.clientWidth - sound_inner.offsetWidth);
      flag = scale;
      video.volume = scale;

      if (video.volume == 0) {
        video.muted = true;
        removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
        removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
        removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
        addClass(soundSwitchSpan, "icon-24gf-volumeDisable");
      } else if (video.volume > 0 && video.volume <= 0.3) {
        removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
        removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
        removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
        addClass(soundSwitchSpan, "icon-24gf-volumeLow");
        video.muted = false;
      } else if (video.volume > 0.3 && video.volume <= 0.6) {
        removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
        removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
        removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
        addClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
        video.muted = false;
      } else {
        removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
        removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
        removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
        addClass(soundSwitchSpan, "icon-24gf-volumeHigh");
        video.muted = false;
      }
      soundBox.style.display = "block";
      soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
      setTimeout(function () {
        soundBox.style.display = "none";
      }, 3000);
    },
  };
  drag(sound_inner, callback2);

  // 键盘事件  按下空格，视频暂停或播放 ，左右键视频快进，上下键音量控制
}

// 提取一个专门用来设置拖拽的函数
function drag(obj, callBack) {
  //抽象元素一开始的位置
  var startPoint = {
    x: 0,
    y: 0,
  };
  //抽象鼠标一开始的位置
  var elementPoint = {
    x: 0,
    y: 0,
  };

  //元素绑定onmousedown事件
  obj.onmousedown = function (event) {
    // 当调用一个元素的setCaputure()方法后，这个元素将会把下一次所有的鼠标按下的相关事件捕获到自身上
    //设置元素捕获所有鼠标按下事件
    //setCaputure()只有IE支持，其他浏览器可能会报错
    if (obj.setCaputure) {
      obj.setCaputure();
    }

    event = event || window.event;
    //元素偏移量 鼠标.clientX-元素.offsetLeft 鼠标.clientY-元素.offsetTop

    // var ol = event.clientX - obj.offsetLeft;

    elementPoint.x = obj.offsetLeft;
    elementPoint.y = obj.offsetTop;

    startPoint.x = event.clientX;
    startPoint.y = event.clientY;

    //document绑定onmousemove事件
    document.onmousemove = function (event) {
      event = event || window.event;

      var nowPoint = {
        x: 0,
        y: 0,
      };
      nowPoint.x = event.clientX;
      nowPoint.y = event.clientY;

      var L = elementPoint.x + (nowPoint.x - startPoint.x);

      //获取鼠标坐标
      // var left = event.clientX - ol;
      // var top = event.clientY;

      if (L < 0) {
        L = 0;
      } else if (L > obj.parentNode.clientWidth - obj.offsetWidth) {
        L = obj.parentNode.clientWidth - obj.offsetWidth;
      }
      //修改元素位置
      obj.style.left = L + "px";

      //调用回调函数
      if (
        callBack &&
        callBack["move"] &&
        typeof callBack["move"] === "function"
      ) {
        callBack["move"].call(obj);
      }
    };

    //document绑定onmouseup事件
    document.onmouseup = function () {
      //取消document的onmousemove事件
      document.onmousemove = null;
      //取消document的onmouseup事件
      document.onmouseup = null;
      //鼠标松开，取消捕获事件
      if (obj.releaseCapture) {
        obj.releaseCapture();
      }
    };
    // 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为 但对ie8不起作用
    return false;
  };
}

//工具类
function addClass(node, className) {
  var reg = new RegExp("\\b" + className + "\\b");
  if (!reg.test(node.className)) {
    node.className += " " + className;
  }
}

function removeClass(node, className) {
  if (node.className) {
    var reg = new RegExp("\\b" + className + "\\b");
    var classes = node.className;
    node.className = classes.replace(reg, "");
    if (/^\s*$/g.test(node.className)) {
      node.removeAttribute("class");
    }
  } else {
    node.removeAttribute("class");
  }
}

function changeTime(time) {
  time = parseInt(time);

  var m = toZero(Math.floor(time / 60));
  var s = toZero(Math.round(time % 60));

  return m + ":" + s;
}
// 补0
function toZero(num) {
  var val = "";
  if (num < 10) {
    val = "0" + num;
  } else {
    val = val + num;
  }
  return val;
}