如何用JavaScript和CSS3编写简易视频播放器弹幕效果？

本文共计1161个文字，预计阅读时间需要5分钟。

原文：本文字尝试写了一个demo模拟了最简单的视频弹幕功能。思路：设置一个div和所播放的video的大小一致，把这个div标签蒙在video上面用于设置弹幕。在video的右边放一个ul列表，用于显示弹幕。

改写后：本文通过一个demo演示了如何实现最简单的视频弹幕功能。方法：创建一个与视频大小相同的div，将其覆盖在视频上，作为弹幕显示区域。在视频右侧添加一个ul列表，用于展示弹幕内容。

本文尝试写了一个demo模拟了最简单的视频弹幕功能。

思路：

设置一个<div>和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用于显示弹幕列表。

屏幕上面的弹幕，把内容放在<span>标签里面，一般一行字都是从左边飞到右边， 为了简单起见，这个移动就用了CSS3 的transition 属性。position设置为absolute,
那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候，就会隐藏飞出去的部分。

当点击发送的时候，获取input中的内容、当前日期、视频播放的进度video.currentTime，把这个内容作为一个对象存入一个数组中。