JavaScript css3实现简单视频弹幕功能

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

思路：

设置一个

和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个

列表用于显示弹幕列表。

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

当点击发送的时候，获取input中的内容、当前日期、视频播放的进度video.currentTime，把这个内容作为一个对象存入一个数组中。把放置弹幕的span标签加入到div蒙版里，设置它的left，transition就会从当前left过度到下一个left，所以实现了移动。过渡完之后这个span标签就没用了，用removeChild把它中父元素中移除。同时把生成的

• 标签加入到ul中。

  代码：

  
   
  
  
  
      
      
  
  
  
  
      
  
          
  
          
          
  
              
              
          
          
  
              ~弹幕~
              
  
              
  
              
          
          
  
          
      
  
  
   
   
  
  

  效果：

  

  虽然这样写很简单，但是有个很大的问题就是transition过渡left属性不能暂停，所以自然这个transition动画就只能等它执行完。或者说每个标签的移动都用interval定时器来完成移动。不过这样写就要复杂一些。

  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。