分享人：herry弹幕篇:弹幕文化与HTML5说说弹幕弹幕文化1什么是弹幕？弹(dàn)幕(mù)在国内兴起已经有个把年了，相信很多朋友都差不多知道弹幕这个东西。弹幕系统最初的起源是一家日本的网站，名叫“NICONI ...
分享人：herry
弹幕篇:弹幕文化与HTML5
说说弹幕
弹幕文化
1什么是弹幕？
弹(dàn)幕(mù)在国内兴起已经有个把年了，相信很多朋友都差不多知道弹幕这个东西。
弹幕系统最初的起源是一家日本的网站，名叫“NICONICO”，被国内人们称为N站，是一家以动漫ACG为主的视频网站，。所谓弹幕，实际上就是观众对当前视频的评论吐槽。只是这句有一定的针对性了。在视频播放到某个时间段时用户对该时刻画面的评论。
国内首家弹幕视频网站是ACFUN，大家称之为A站。之后有出现了一个名为BILIBILI的弹幕站，大家称值为B站。
如下图展示：
（图：niconico）
（图：bilibili）
2弹幕文化
弹幕这种东西能给人一种能实时互动的错觉，虽然大家发送的时间有所不同，但是看的视频与吐槽的同步就会让人觉得并不止你一个人在看同一个视频。
就比如，如果在一个弹幕网站看一个恐怖视频，你还会觉得恐怖吗？
弹幕系统不断扩散，现如今，很多国内主流的一些视频网站也都相继有了弹幕系统功能，音乐网站、甚至漫画网站以及小说网站都有了弹幕，还有论坛贴吧有了弹幕（后面这些实际上大多是评论弹幕化，并没有使用时间轴的弹幕系统，为随机时间轴出现的弹幕）。
html5弹幕
说说html5能否实现效果
答案是可以的。现在国内市场弹幕网站PC端采用的是flash弹幕播放器来播放的，对于播放器来讲flash是非常适合做这个的，而且已经做很久了，所以这方面flash相对html5是更有优势的，而且能播放的资源格式编码也更多。但是现今的情况是，人们大多数会更喜欢使用移动端看看视频啥的了。IT界的人大多都知道移动端并不适合使用flash，就算可以使用flash的安卓系统，但是这个很费电/费流量，每次打开网页都要加载一次flash不说，还很卡。苹果则是直接放弃flash，所以现在flash只用在了PC网页上了，移动端一般都是调用APP里面自带的弹幕播放器进行播放，也不是html5播放的。为啥大多数网站不写个html5的弹幕播放器呢？实际上也不是没写，也有些网站是写了的，B站的wap站点就是采用的html5弹幕播放器，但是很多情况下几部看不到弹幕，为什么呢？因为大多数手机浏览器都有他们自带的视频播放器的，当浏览器检测的你的网页中有video元素，便会立马替换掉你的播放器为浏览器自带的视频播放器来播放，你的那个写里弹幕滚动的浮层完全就被浏览器的播放器给覆盖了（前端代码再牛逼也是牛不过浏览器的）。除非你的浏览器并不对video元素做处理，那就不会有什么问题了。
（图：bilibiliwap版）
弹幕的一般实现原理：
获取到需要展示的弹幕列表，放在一个列表中，每个弹幕对象都存在弹幕文本、弹幕出现时间、弹幕颜色、弹幕大小等属性。
当前音视频播放到该条弹幕的弹幕出现时间点时，该弹幕已某个形式展示出来，一般以从右到左的滚动为例，超出屏幕后隐藏。
这个逻辑html5是完全可以实现的。
好了，现在就不说这些了，更多弹幕相关的文章可以上百度看看。我们来看个h5实现的弹幕音频播放器吧，为什么要用音频呢，因为在微信播放video视频，video播放器就会被微信播放器替换掉，就看不到弹幕了。
3弹幕音频效果演示
4弹幕效果代码分列
HTML部分
<body onload="pollMsg(0)"><div class="container"> <!--音频与弹幕播放层--> <div class="leftContent"> <div class="pool" id="pool"> <div class="abs_div"> <audio id="audio" width="100%" height="360" controls="controls" onplay="handle();" onpause="handle();"> <source src='/images/loading.gif' data-original="xxx.mp3" type="audio/mp3"> </audio> </div> <!--预留弹幕层--> </div> </div> <!--弹幕列表--> <div class="list" style="display:none;"> <table border="0" id="list"> <tr style="background-color:#eee"> <th>时间</th><th>内容</th><th>发送日期</th> </tr> <tr> <td>00:00</td><td>测试弹幕</td><td>2012-01-01 00:00</td> </tr> </table> </div></div></body>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：弹幕文化与HTML5
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
