视频拖拽功能

MuYan2021-11-26web
平时逛视频网站（如 B 站）时，总能遇到上拉滚动时右下角出现一个可以拖拽的视频播放器。
闲来无事记录下该功能的实现。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>drag</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

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

      body {
        background-color: #dddddd;
        height: 200%;
      }

      #drag {
        width: 320px;
        height: 240px;
        position: fixed;
        right: 100px;
        bottom: 100px;
        display: none;
      }

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

      #drag:hover {
        cursor: pointer;
      }

      #drag:hover .drag-mask {
        opacity: 1;
      }

      .drag-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        background-image: initial;
        cursor: move;
        opacity: 0;
        top: 0;
        left: 0;
      }

      .play-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
      }

      .play-container div {
        position: relative;
        float: left;
        border: 25px solid #404040;
        color: #404040;
        height: 0;
        width: 0;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -o-border-radius: 100%;
        border-radius: 100%;
        margin: 0 20px;
      }

      .play-container span {
        border-style: solid;
        text-indent: -9999px;
        position: absolute;
        top: -8px;
        left: -3px;
      }

      .play-btn span {
        border-color: transparent transparent transparent #fff;
        border-width: 8px 0 8px 12px;
        width: 0;
        height: 0;
      }

      .pause-btn span {
        border-color: transparent white;
        border-width: 0 6px;
        height: 15px;
        width: 6px;
        left: -9px;
      }
    </style>
  </head>

  <body>
    <div id="drag">
      <video src="https://www.w3school.com.cn/i/movie.ogg" id="myVideo">
        您的浏览器不支持 video 标签。
      </video>
      <div class="drag-mask">
        <div class="play-container">
          <div class="play-btn" style="display: block;">
            <span></span>
          </div>
          <div class="pause-btn" style="display: none;">
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.onscroll = function() {
        // 兼容获取 scrollTop
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        document.getElementById("drag").style.display =
          scrollTop > 500 ? "block" : "none";
      };
      window.onload = function() {
        var drag = document.getElementById("drag");
        // 点击某物体时，用drag对象即可，move和up是全局区域，
        // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
        drag.onmousedown = function(e) {
          // 阻止默认的点击事件执行
          e.preventDefault();
          var event = e || window.event; // 兼容IE浏览器
          // 鼠标点击物体那一刻相对于物体左侧边框的距离 = 点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
          var diffX = event.clientX - drag.offsetLeft;
          var diffY = event.clientY - drag.offsetTop;
          // 兼容 IE
          if (typeof drag.setCapture !== "undefined") {
            drag.setCapture();
          }
          // 除 mask 元素外禁止拖拽
          if (event.target.className !== "drag-mask") return;
          // 监听鼠标移动（拖拽）事件
          document.onmousemove = function(event) {
            var event = event || window.event;
            var moveX = event.clientX - diffX;
            var moveY = event.clientY - diffY;
            if (moveX < 0) {
              moveX = 0;
            } else if (moveX > window.innerWidth - drag.offsetWidth) {
              moveX = window.innerWidth - drag.offsetWidth;
            }
            if (moveY < 0) {
              moveY = 0;
            } else if (moveY > window.innerHeight - drag.offsetHeight) {
              moveY = window.innerHeight - drag.offsetHeight;
            }
            drag.style.left = moveX + "px";
            drag.style.top = moveY + "px";
          };
          // 监听用户鼠标按键松开事件
          document.onmouseup = function(ev) {
            document.onmousemove = null;
            document.onmouseup = null;
            // 修复低版本IE bug
            if (typeof drag.releaseCapture != "undefined") {
              drag.releaseCapture();
            }
          };
          // 解决鼠标松开后还有概率可以拖动的问题
          document.ondragstart = function(ev) {
            ev.preventDefault();
          };
          document.ondragend = function(ev) {
            ev.preventDefault();
          };
        };
      };

      var videoElement = document.getElementById("myVideo");
      var play = document.getElementsByClassName("play-btn")[0];
      var pause = document.getElementsByClassName("pause-btn")[0];
      // 开始播放
      play.onclick = function() {
        videoElement.play();
        play.style.display = "none";
        pause.style.display = "block";
      };
      // 暂停播放
      pause.onclick = function() {
        videoElement.pause();
        play.style.display = "block";
        pause.style.display = "none";
      };
      // 播放结束
      videoElement.addEventListener(
        "ended",
        function() {
          play.style.display = "block";
          pause.style.display = "none";
        },
        false
      );
    </script>
  </body>
</html>
参考：原生 js 拖拽元素open in new window
昵称
邮箱
网址
按正序
按倒序
按热度
视频拖拽功能

预览:
