haizlin/fe-interview

[软技能] 第124天 你有开发过弹幕吗？知道它的原理吗？说说看

Opened this issue · 3 comments

haizhilin2013 commented

第124天 你有开发过弹幕吗？知道它的原理吗？说说看

csuZipple commented

没有开发过，如果要我来开发的话我会这样做：

  • 在video上方设置一个弹幕container，设置相对定位。子元素都是绝对定位并设置z-index。
  • 生成一个dom将弹幕内容填充进去，在container中append
  • 设置dom的animation动画，从右到左划过整个video
  • 将带有时间戳信息的弹幕内容通过规定好的格式发送给后端

PS：

  • 顺序可以调换，一般是确定后台接收到数据了再生成dom
  • 没了解过如何实现弹幕防挡。
fanyifanbumaimeng commented

补充一点，弹幕出屏幕之后要销毁。

没有开发过，如果要我来开发的话我会这样做：

  • 在video上方设置一个弹幕container，设置相对定位。子元素都是绝对定位并设置z-index。
  • 生成一个dom将弹幕内容填充进去，在container中append
  • 设置dom的animation动画，从右到左划过整个video
  • 将带有时间戳信息的弹幕内容通过规定好的格式发送给后端

PS：

  • 顺序可以调换，一般是确定后台接收到数据了再生成dom
  • 没了解过如何实现弹幕防挡。

补充一点，弹幕出屏幕之后要销毁。

tao7544 commented

@csuZipple 似乎移动端浏览器 视频会处于层级最高状态。弹幕实现不了。。未来好像有弹幕标签