原生 JS 实现视频弹幕功能

在这里插入图片描述
效果还行吧，大概就不到 150 行代码即可。快点学起来吧

在这里插入图片描述
<!DOCTYPE html>
<html>

<head>
  <title>视频弹幕</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    /* 通过标签名称设置样式 */
    body {
      background: rgb(245, 245, 245);
      /* overflow: hidden; */
    }

    .container {
      width: 500px;
      background: #fff;
      /* 设置元素在页面中间 */
      margin: 100px auto;
      padding: 10px;
    }

    .container .top {
      width: 100%;
      position: relative;
      /* 溢出隐藏 */
      overflow: hidden;
    }

    .container .top video {
      width: 100%;
    }

    .container .bot {
      /* 采用flex弹性盒布局 */
      display: flex;
    }

    /* 弹幕数量的宽度 */
    .container .bot .danmu-num {
      width: 100px;
    }

    /* 弹幕颜色选择器的宽度 */
    .container .bot .danmu-color {
      width: 80px;
    }

    /* 弹幕输入框的宽度*/
    .container .bot .danmu-input {
      width: 240px;
      margin-left: -15px;
    }

    .container .bot .danmu-input input {
      width: 100%;
      height: 25px;
      /* 设置字体大小 */
      font-size: 16px;
    }

    #textColor {
      width: 50px;
      height: 25px;
      border: none;
    }

    /* 弹幕发送按钮的宽度 */
    .container .bot .danmu-btn {
      flex: 1;
      text-align: center;
      background: cyan;
      line-height: 25px;
      cursor: pointer;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      /* margin-left: 3px; */
    }

    .msg {

      /* 设置弹幕最终停留的位置 */
      transform: translateX(-100px);

      /* 设置绝对定位 */
      position: absolute;
      /* -webkit-text-stroke: 1px black; */
      /* 设置字体的粗细 */
      font-weight: 800;

      /* 使用关键帧动画 */
      animation: l-2-r 6s linear;
    }

    /* 从左到右的移动动画 */
    @keyframes l-2-r {
      from {
        transform: translateX(500px);
      }
      to {
        transform: translateX(-100px);
      }
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="top" id="dmList">
      <video src="https://video.pearvideo.com/mp4/third/20201114/cont-1707004-15488237-105621-hd.mp4" id="video" width="300" height="300"></video>
    </div>
    <div class="bot">
      <!-- 显示弹幕的数量 -->
      <div class="danmu-num">5678条弹幕</div>
      <!-- 颜色选择器，用来设置弹幕的颜色 -->
      <div class="danmu-color">
        <!-- input 的type=colo就是颜色选择器 -->
        <input type="color" id="textColor">
      </div>
      <!-- 弹幕输入框，获取用户的输入 -->
      <div class="danmu-input">
        <input type="text" id="text">
      </div>
      <!-- 发送按钮，点击之后发送弹幕 -->
      <div class="danmu-btn" onclick="sendDanmu()">发送弹幕</div>
    </div>
  </div>

  <script>

    var dmList = document.getElementById('dmList')

    var video = document.getElementById('video')

    video.addEventListener('click', function () {
      video.play()
    })

    function sendDanmu() {
      // 获取输入框的值
      var text = document.getElementById("text").value;

      // 创建元素
      var p = document.createElement("p")
      // 设置p标签的内容
      p.innerText = text;

      //给p标签添加msg类
      p.setAttribute("class", "msg")

      // 设置弹幕的随机高度
      var h = Math.random() * 240;
      p.style.top = h + "px"


      // 获得颜色选择器的值
      var color = document.getElementById("textColor").value
      p.style.color = color;

      // 把弹幕添加到页面上
      dmList.appendChild(p)

      // 设置输入框为空
      document.getElementById("text").value = ""
    }
  </script>
</body>

</html>
原生 JS 实现视频弹幕功能

效果还行吧，大概就不到 150 行代码即可。快点学起来吧

悦读
