js做一个简单的视频弹幕

实现视频弹幕功能的话，可以通过以下步骤进行：

1. 在 HTML 中创建一个 video 标签，设置视频地址以及宽高等属性。
2. 在 CSS 中设置 video 的样式，可以设置宽高、边框等。
3. 在 JavaScript 中编写弹幕逻辑：创建一个弹幕容器 div，设置其样式以及位置，并将其添加到视频容器中。然后根据用户输入的消息创建一个弹幕元素，设置其样式和位置，并将其添加到弹幕容器中。最后通过定时器实现弹幕的滚动效果。

具体的实现过程可以参考下面的代码示例：

HTML 代码：

<video src="video.mp4" width="640" height="360"></video>

CSS 代码：

video {
  border: 1px solid #ccc;
}
.danmu-container {
  position: relative;
  width: 640px;
  height: 360px;
  overflow: hidden;
}
.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

JavaScript 代码：

// 获取视频元素和弹幕容器
var video = document.querySelector('video');
var danmuContainer = document.createElement('div');
danmuContainer.className = 'danmu-container';
video.parentNode.insertBefore(danmuContainer, video.nextSibling);

// 添加弹幕
function addDanmu(text) {
  var danmuItem = document.createElement('span');
  danmuItem.textContent = text;
  danmuItem.className = 'danmu-item';
  danmuItem.style.top = Math.floor(Math.random() * (danmuContainer.offsetHeight - 30)) + 'px';
  danmuItem.style.right = '-' + danmuItem.offsetWidth + 'px';
  danmuContainer.appendChild(danmuItem);

  // 弹幕滚动
  var offset = danmuContainer.offsetWidth + danmuItem.offsetWidth;
  danmuItem.style.transition = 'transform ' + (offset / 100) + 's linear';
  danmuItem.style.transform = 'translateX(-' + offset + 'px)';
  danmuItem.addEventListener('transitionend', function() {
    danmuContainer.removeChild(this);
  });
}

// 监听键盘事件，添加弹幕
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    var text = prompt('请输入弹幕内容：');
    if (text) {
      addDanmu(text);
    }
  }
});

这是一个简单的视频弹幕实现，具体的效果可以通过 CSS 调整。