├── .gitignore ├── CONTRIBUTING.md ├── FAQ.zh.md ├── LICENSE.md ├── README.md ├── TF └── Bullet_Chatting_TF_Draft.md ├── USE-CASES ├── bullet chatting rendering for live streaming.md ├── bullet chatting rendering for non-video.md ├── bullet chatting rendering for on-demand videos.md └── logical architecture for bullet chatting.md ├── api.html ├── api.zh.html ├── demos ├── bulletchatting-proposal-demo │ ├── .gitignore │ ├── README.md │ ├── dist │ │ ├── bundles │ │ │ ├── webcomponents-ce.js │ │ │ ├── webcomponents-sd-ce-pf.js │ │ │ ├── webcomponents-sd-ce.js │ │ │ └── webcomponents-sd.js │ │ ├── polymer-bulletchatting.js │ │ ├── polymer-bulletchatting.js.map │ │ ├── polymer-danmaku.js │ │ ├── polymer-danmaku.js.map │ │ └── webcomponents-loader.js │ ├── index.html │ ├── index.js │ ├── package.json │ ├── src │ │ ├── bullet-chatting-list.js │ │ ├── bullet-chatting.js │ │ └── index.js │ ├── webpack │ │ ├── dev.config.js │ │ └── prod.config.js │ └── yarn.lock ├── no-media │ ├── README.md │ ├── assets │ │ ├── index_sprites.png │ │ └── police.png │ ├── index.html │ └── source │ │ ├── 201801121125_CoverFile_XxjflbC038060_20180111_HGVFN0_HSJ720H.jpg │ │ ├── 201802041701_7_H169_720.jpg │ │ ├── 201805051744_1_H169_720.jpg │ │ ├── 201805061038_05_H169_720.jpg │ │ ├── 201806161010_GZTV_1500000_20180615_28757712_0_384_H169_720.jpg │ │ ├── 201808101815_WuXiInfo_1500000_20180810_29311670_0_326_H169_720.jpg │ │ ├── 201901152235_JiangSuPublic_1500000_20190115_30968727_0_326_H169_720.jpg │ │ ├── 201901161744_201901161609363899158_H169_720.jpg │ │ ├── 201901172244_JiangSuPublic_1500000_20190117_30989482_0_326_H169_720.jpg │ │ ├── 201901181635_2019011815234056209_H169_720.jpg │ │ ├── 201901311824_ZheJiangFilmHD_2500000_20190131_31119212_0_326_H169_720.jpg │ │ ├── 201901312113_31xw0131ztkx34_H169_720.jpg │ │ ├── 201904291231_ZheJiangPublicHD_2500000_20190429_31909707_0_326_H169_720.jpg │ │ ├── 201905051137_a04ce07f5841fbb7f2d553b7c14a4edb_H169_720.jpg │ │ ├── 201905132033_XinHuaNews_1500000_20190513_32045216_0_384_H169_720.jpg │ │ ├── 201905140712_DongNanHD_3000000_20190514_32048232_0_326_H169_720.jpg │ │ ├── 201905251825_XinHuaNews_1500000_20190525_32161395_0_384_H169_720.jpg │ │ ├── 201905281830_TVSFinance_1500000_20190528_32189127_0_384_H169_720.jpg │ │ ├── 201906021221_XinHuaNews_1500000_20190602_32237891_0_384_H169_720.jpg │ │ ├── 201906042227_fb7ec1f68f3f48c999acaa1af8c2a490_H169_720.jpg │ │ ├── 201906060900_1_H169_720.jpg │ │ ├── 201906132149_Shan1XiTV_1500000_20190613_32355252_0_384_H169_720.jpg │ │ ├── 201906231456_20190623145439862367_H169_720.jpg │ │ ├── 201906231525_1_H169_720.jpg │ │ ├── barrageWall.js │ │ ├── commonPlayer.js │ │ ├── common_mgvendor.js │ │ ├── index.js │ │ ├── jquery.min.js │ │ ├── migusdk.js │ │ ├── style-index.css │ │ ├── vue_mgvendor.js │ │ └── wall.css └── simple-demo │ ├── css │ └── app.08c2d989.css │ ├── danmaku.vdt │ ├── favicon.ico │ ├── index.html │ └── js │ ├── app.276c9d29.js │ ├── app.276c9d29.js.map │ ├── chunk-vendors.4a7e2669.js │ └── chunk-vendors.4a7e2669.js.map ├── images ├── architecture │ └── global.png ├── bulletchat-Anti-block.png ├── bulletchat-Anti-block01.png ├── bulletchat-fig.png ├── bulletchat-fig01.png ├── bulletchat-wall.png ├── bulletchat-wall01.jpeg ├── content-no-bulletchat.png ├── content-no-bulletchat01.png ├── content.png ├── content01.png ├── danmaku.png ├── sample1.png ├── sample2.png ├── sample3.png ├── sample4.png ├── sample5.png ├── sample6.png ├── sample7.png ├── sample8.png ├── video-highlights.jpeg ├── video-live.png ├── video-live01.jpeg ├── video-on-demand.png ├── video-on-demand01.png ├── web_bulletchat.png ├── web_bulletchat01.png ├── why1.png ├── why2.png ├── why3.png ├── why4.png ├── why5.png ├── why6.png ├── why7.png └── why8.png ├── index.html ├── index.zh.html ├── index_en.html ├── local.css ├── meeting.zh.md ├── usecase.html ├── usecase.zh.html └── w3c.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Bullet Chatting Community Group 2 | 3 | This repository is being used for work in the W3C Bullet Chatting Community Group, governed by the [W3C Community License Agreement (CLA)](https://www.w3.org/community/about/agreements/cla/). To make substantive contributions, you must join the CG. 4 | 5 | If you are not the sole contributor to a contribution (pull request), please identify all 6 | contributors in the pull request comment. 7 | 8 | To add a contributor (other than yourself, that's automatic), mark them one per line as follows: 9 | 10 | ``` 11 | +@github_username 12 | ``` 13 | 14 | If you added a contributor by mistake, you can remove them in a comment with: 15 | 16 | ``` 17 | -@github_username 18 | ``` 19 | 20 | If you are making a pull request on behalf of someone else but you had no part in designing the 21 | feature, you can remove yourself with the above syntax. -------------------------------------------------------------------------------- /FAQ.zh.md: -------------------------------------------------------------------------------- 1 | ### FAQ 2 | 3 | ------ 4 | 5 | 6 | 7 | **Q1:为什么弹幕不能使用JS来实现或者使用TTML或WebVTT来扩展？** 8 | 9 | **A1**:弹幕目前主流的实现方式是使用Canvas或者DOM+CSS+JS来实现，但是实现弹幕的效果对于开发者来说成本很大，开发复杂成本高，所以希望能通过标准化使得开发实现简化并能够在不同的厂商中弹幕的格式和实现方式保持一致。 10 | 11 | 弹幕可以参考 WebVTT 对文本的设计，但弹幕的信息密度、使用区域、使用方式和 WebVTT 有很大不同，像直播弹幕、弹幕上墙、页面互动、非文字弹幕等用例。此外，弹幕对于内容的自定义程度更高，允许直接定义 CSS 样式和 emoji、图片、超链接等内容。 12 | 13 | 目前TTML/WebVTT对于弹幕的需求还无法满足，具体可以参考：[这里](https://w3c.github.io/danmaku/usecase.html#a-gap-analysis-of-bullet-chatting-and-subtitles)。 14 | 15 | 16 | 17 | **Q2:弹幕显示在视频画面上会造成遮挡，是否会阻碍观看视频，降低观看体验？** 18 | 19 | **A2**:传统的播放器评论系统是独立于播放器之外的，因此评论的内容大多围绕在整个视频上。 但是弹幕但是其只会在视频中特定的一个时间点出现，因此在相同时刻发送的弹幕基本上也具有相同的主题。弹幕的喜爱者多以80后、90后、00后年轻人为主，这代年轻人大多是独生子女，看视频本身是孤独的娱乐项目，在参与评论时就会有与其他观众同时评论的感觉，找到更多的共鸣感。 20 | 21 | 此外，还可以通过降低透明度、控制弹幕区域、文字大小等方式根据个人合适的习惯调整到最佳的观看效果。同时也可以通过选择是否显示弹幕开关来控制弹幕的显示与不显示。 22 | 23 | 24 | 25 | **Q3:弹幕不依附`