js制作简易弹幕
制作的原因:大家在直播或者视频软件上应该常常看见各种弹幕,我想大家应该也想知道弹幕是怎么做出来的,那么我们今天一起来制作一下简易弹幕。
主体思路:简易弹幕原理就是将用户输入的文字存储到一个标签(我用的是span)里面,然后将其在页面的右侧弹出。
我们纵观各种直播平台的弹幕
整体布局
css样式就不写出来了毕竟每个人审美不同
需要注意的点有
1.弹幕字体颜色可以随机改变(这里就直接上图片了,这样大家也可以自己敲一敲)
2.弹幕字体位置也是需要随机的,总不能一直在一个点输出。
3.布局上面有一个需要注意的地方(outline: none;)一定要加上哦
总结:弹幕系统很简单,理解也很简单,我已经吧需要注意的点以及部分代码放在了上面,剩下的留给聪明的你们自己敲了,还可以改变一下字体的大小,以及需要注意代码输出时候,上下的边距。
autoplay(视频在就绪后马上播放)
controls(向用户显示控件,比如播放按钮。)
muted(关闭视频的声音)
loop(媒介文件完成播放后再次开始播放)