JS 简单实现视频弹幕效果（ + cookie）

最新推荐文章于 2024-05-21 01:18:16 发布

艾敲代码的MT

最新推荐文章于 2024-05-21 01:18:16 发布

阅读量407

点赞数 1

本文链接：https://blog.csdn.net/qq_26705343/article/details/114134617

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </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 {
      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: rgb(169, 160, 209);
      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">
    //添加视频地址 （mp4）
      <video src="../TV/sp.mp4" id="video" width="300" height="300"></video>
    </div>
    <div class="bot">
      <div><span  id="numbers">0</span><span>条弹幕</span> </div>
      <div class="danmu-color">
        <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>

    let dmList = document.getElementById('dmList')
    let video = document.getElementById('video')
    
    video.addEventListener('click', function () {
        video.play()
    })
    
    function sendDanmu() {
        let text = document.getElementById("text").value;
        let p = document.createElement("p")
        p.innerText = text;
        p.setAttribute("class", "msg")
        let h = fn.random(10,100);
        p.style.top = h + "px"
        let color = document.getElementById("textColor").value
        p.style.color = color;
        dmList.appendChild(p)
        fn.setCookie("userMsg",p.innerHTML);


        let numbers = document.getElementById("numbers");
        let barrage = numbers.innerHTML++;

        console.log(numbers.innerHTML)

      document.getElementById("text").value = ""
    }



    
    const fn = {
        random(min,max){
        return Math.round(Math.random()*(max-min)+ min);
    },

    setCookie(key, val, exp){
        if (exp) {
          let date = new Date();
          let time = date - 0;
          date.setTime(exp * 60 * 1000 + time);
          date = date.toGMTString();
          exp = 'expires=' + date;
        }
        document.cookie = key + '=' + val + ';' + exp;
      }
    }

  </script>
</body>

</html>