This repository has been archived by the owner on Sep 8, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
264 lines (241 loc) · 14.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>微信弹幕插件</title>
<meta name="description" content="将网页版微信的消息即时显示在任意标签页上">
<meta name="keywords" content="微信, 弹幕, 浏览器, 插件, 火狐, 谷歌, Firefox, Chrome">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/images/icon.png">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/images/icon.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="assets/images/icon.png">
<meta name="msapplication-TileColor" content="#c8c8c8">
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/index.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.0/js/amazeui.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?cd7464e7917842a708c6a4e085660a87";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body id="top">
<div class="am-container">
<div class="banner">
<p class="am-text-right">
<a class="am-btn am-btn-success am-btn-xs" href="helper.html">弹幕助手 <span class="am-icon-angle-double-up"></span></a>
<a class="am-btn am-btn-danger am-btn-xs" href="feature.html">特色简介 <span class="am-icon-angle-double-up"></span></a>
</p>
<h1>微信弹幕插件</h1>
<p>将网页版微信的消息显示在任意页面上</p>
<p class="banner-btnbox">
<a class="am-btn am-btn-warning am-round" href="https://addons.mozilla.org/zh-CN/firefox/addon/weixin-danmu/" target="_blank">
<i class="am-icon-firefox"></i> <b>Firefox</b>
</a>
<a class="am-btn am-btn-default am-round am-margin-horizontal-xs" href="https://github.com/aidistan/browser-weixin-danmu" target="_blank" style="padding: 8px 10px;">
<span class="am-icon-github am-icon-sm"></span>
</a>
<a class="am-btn am-btn-secondary am-round" href="https://chrome.google.com/webstore/detail/%E5%BE%AE%E4%BF%A1%E5%BC%B9%E5%B9%95/oaglinapidhlmnnnkcmkmgkopbodjonl" target="_blank">
<i class="am-icon-chrome"></i> <b>Chrome</b>
</a>
</p>
<nav class="scrollspy-nav" data-am-sticky>
<ul class="am-text-center">
<li><a href="#top" style="padding: 5px 10px;"><img src="assets/images/icon.png" width=36 height=36></a></li>
<li><a href="#get-started">安装</a></li>
<li><a href="#shoot-bullet">发射</a></li>
<li><a href="#faq">问答</a></li>
<li><a href="#more-info">更多</a></li>
</ul>
</nav>
</div>
<h2 id="get-started">安装插件</h2>
<p>对于 <i class="am-icon-firefox"></i> Firefox 浏览器</p>
<ul>
<li><a href="https://addons.mozilla.org/zh-CN/firefox/addon/weixin-danmu/" target="_blank">从火狐扩展商店安装</a>(推荐,插件能自动更新)</li>
<li><a href="http://aidistan.github.io/firefox-weixin-danmu/weixin-danmu.xpi">从插件官网直接安装</a></li>
</ul>
<p>对于 <i class="am-icon-chrome"></i> Chrome 浏览器</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/%E5%BE%AE%E4%BF%A1%E5%BC%B9%E5%B9%95/oaglinapidhlmnnnkcmkmgkopbodjonl" target="_blank">从谷歌网上应用商店安装</a>(推荐,插件能自动更新)</li>
<li><a href="http://aidistan.github.io/chrome-weixin-danmu/weixin-danmu.zip">从插件官网下载压缩包</a>,解压后将文件夹直接拖入 Chrome 的扩展页</li>
</ul>
<blockquote>
即将以 <i class="am-icon-chrome"></i> Chrome 插件方式支持 <i class="am-icon-internet-explorer"></i> Edge 浏览器
</blockquote>
<h3>基本使用</h3>
<ol>
<li>安装插件</li>
<li>在浏览器的任意一个标签页中登陆网页版微信</li>
<li>打开要捕获消息的群或好友的对话框</li>
<li>切换到要显示弹幕的任意一个网页</li>
<li>在手机微信上向所选的好友或群发消息</li>
<li>弹幕出现!</li>
</ol>
<h3>详细说明</h3>
<h4>使用工具栏按钮</h4>
<ul>
<li>未侦测到对话框时按钮呈灰色,点击按钮将打开网页微信页面</li>
<li>打开对话框后按钮会自动点亮,点击按钮将打开弹幕助手页面</li>
</ul>
<h4>修改默认设置</h4>
<p>打开浏览器插件页 ( <i class="am-icon-firefox"></i> <code>Ctrl + Shift + A</code>,<i class="am-icon-chrome"></i> 木有快捷键),点击微信弹幕的设置按钮进入附加组件详情页面,从中可以:</p>
<ul>
<li>开启/关闭显示所有消息</li>
<li>开启/关闭显示自己消息</li>
<li>调整弹幕的默认大小</li>
<li>开启/关闭好友昵称显示</li>
<li>开启/关闭微信标签固定</li>
<li>开启/关闭消息通知显示</li>
<li>开启/关闭弹幕测试模式</li>
</ul>
<blockquote>
通过配置是否“显示所有消息”,微信弹幕既可以在活动中使用固定群聊作为弹幕源而不会泄漏私人消息,也可以在自己上网时监听来自所有人的微信消息。
</blockquote>
<h2 id="shoot-bullet">发射弹幕</h2>
<p>微信发送的任意文字、表情、图片,默认会以固定大小、随机颜色、随机位置显示在屏幕上。(部分表情在网页微信上不会显示,因此无法做成弹幕)</p>
<p>目前支持自定义弹幕的颜色、大小和位置,格式为 <code>:字</code>,具体说明如下:</p>
<ul>
<li>冒号同时支持中文全角符号和英文半角符号</li>
<li>冒号和魔力字符(效果示意中的灰色部分)不会显示在弹幕中</li>
<li>属性可以按照任意顺序设置,但必须放在消息的开头</li>
<li>设置字幕大小的效果可以叠加,即“:大:大:大”的效果是":大"的三倍(但大小有上下限)</li>
</ul>
<h3>魔力字符</h3>
<div class="ctl-color" style="background: #00aeef">蓝</div>
<div class="ctl-color" style="background: #ea428a">红</div>
<div class="ctl-color" style="background: #eed500">黄</div>
<div class="ctl-color" style="background: #f5a70d">橙</div>
<div class="ctl-color" style="background: #8bcb30">绿</div>
<div class="ctl-color" style="background: #9962c1">紫</div>
<div class="ctl-color" style="background: #333333">黑</div>
<div class="ctl-color" style="background: #eeeeee; color: #000000;">白</div>
<div class="ctl-other" style="font-size:20px;">大</div>
<div class="ctl-other" style="font-size:12px;">小</div>
<div class="ctl-other" style="padding-top: 0; padding-bottom: 18px;">顶</div>
<div class="ctl-other" style="padding-top: 18px; padding-bottom: 0;">底</div>
<h3>效果示意</h3>
<div id="demo-container">
<p id="demo-bullet1" class="demo-bullet"><span class="demo-lead">:大:黑</span>Valar Morghulis</p>
<p id="demo-bullet2" class="demo-bullet"><span class="demo-lead">:红:底:小</span>Valar Dohaeris</p>
</div>
<h2 id="faq">常见问题</h2>
<p id="faq_application">
<b>问:只能在浏览器的标签页上显示弹幕,有什么用途?</b><br/>
答:随着浏览器功能的逐步增强,浏览器版的弹幕已可以满足绝大多数的需求:
<ul>
<li><b>传统幻灯片</b> 可以导出PDF,用浏览器直接播放</li>
<li>推荐使用 <b>网页幻灯片</b>,<a href="http://shwr.me/" target="_blank">Shower</a> 和 <a href="http://imakewebthings.com/deck.js/" target="_blank">deck.js</a> 都是不错的引擎</li>
<li>HTML5已原生支持<b>视频</b>的播放,可用 <code>vidio</code> 标签把视频嵌在网页里,也可直接把文件拖进浏览器播放。建议使用MP4格式,转码可以用 <a href="http://mediacoder.com.cn/" target="_blank">MediaCoder</a>,最好用的开源转码软件,没有之一(全屏问题请 <a href="#faq_video_fullscreen">移步至此</a> )</li>
<li>什么!你问 <b>音频</b> 怎么办?……别闹了</li>
</ul>
如果你有特殊需求,自己尝试使用但未成功,请在 <a href="#comments">讨论区</a> 中详细说明情况,我会尽量帮忙。
</p>
<p id="faq_video_fullscreen">
<b>问:视频一全屏,弹幕就不见了,怎么破?</b><br/>
答:受浏览器和技术限制,弹幕无法支持 <b>HTML5 视频</b> 和 <b>Flash 视频</b> 的全屏功能。目前我暂时也不知道 Flash 视频怎么办,HTML5 视频有替代的解决方案:
<ul>
<li>直接用浏览器播放:可以使用浏览器的全屏功能达到相同效果(请按<code>F11</code>)</li>
<li>视频嵌在网页里:请将 <code>video</code> 设置成合理的大小,其余同上</li>
</ul>
</p>
<p id="faq_danmu_helper">
<b>问:弹幕助手是什么,有什么用途?</b><br/>
答:基于 <a href='http://shwr.me' target='_blank'><img src='http://shwr.me/pictures/logo.svg' height=19 style='padding-bottom:2px;' /> Shower</a> 制作的弹幕助手,在作为 <b>网页幻灯片</b> 的一个示例的同时,还提供了 <b>群聊入口</b> 和 <b>使用帮助</b>,是活动组织者的有力工具。
<ul>
<li>群聊入口二维码:需根据实际情况,将本地二维码图片拖进方框</li>
<li>使用帮助二维码:扫描后会跳转至当前页面的弹幕发射说明部分</li>
</ul>
</p>
<p id="faq_qq_emoji">
<b>问:为什么 QQ 表情的显示有些奇怪?</b><br/>
答:网页版微信内置的 QQ 表情像素过低... 建议改为使用 Emoji 表情。
</p>
<p id="faq_failed_on_chrome">
<b>问:为什么 Chrome 打开的本地文件不显示弹幕?</b><br/>
答:Chrome 默认禁止插件访问本地文件,需要在插件页中打开 Allow access to file URLs 选项。
</p>
<p id="faq_slow_on_chrome">
<b>问:为什么 Chrome 版插件显示弹幕时总有些延迟?</b><br/>
答:Chrome 为了加快前台页面的浏览速度,对后台页面的事件轮询作了降速处理。出来混,总是要还的...
</p>
<h2 id="more-info">更多信息</h2>
<h3 id="how-to-support">如何支持</h3>
<p>这款插件是我的兴趣之作,若您觉得还不错,愿您能够给予支持:</p>
<ul>
<li>将此插件推荐给您的朋友,让更多人知道它</li>
<li>在 <a href="https://addons.mozilla.org/en-US/firefox/addon/weixin-danmu/" target="_blank">Firefox 扩展商店</a> 或 <a href="https://chrome.google.com/webstore/detail/%E5%BE%AE%E4%BF%A1%E5%BC%B9%E5%B9%95/oaglinapidhlmnnnkcmkmgkopbodjonl" target="_blank">Chrome 应用商城</a> 上给本插件好评</li>
<li>通过评论、邮件或微信,把你的建议和想法告知我</li>
<li><a href="#qrcode">微信打赏 ¥9.9 元</a>,好让我吃顿夜宵继续熬夜加班</li>
</ul>
<h3 id="thanks">特别致谢</h3>
<ul>
<li>感谢 <a href="https://github.com/Integ/WeShoot">WeShoot</a> 的开发者们,他们直接启发了本插件的开发</li>
<li>感谢 <b>Angela</b> 同学帮助开通开发者账号,让微信弹幕得以登陆 Chrome 商城</li>
<li>感谢 <b class="hongbao">目录哥</b>、<b class="offline">Angela</b>、<b class="qrcode">鹤文</b>、<b class="hongbao">史半仙</b>、<b class="qrcode">Ivy</b> 等用户的赞助</li>
</ul>
<p>在此还要一并感谢所有微信弹幕插件用户,你们的支持是我更新插件的不懈动力!</p>
<h3 id="change-log">变更历史</h3>
<p>想了解新版本增加了哪些功能,修复了哪些 bug?快查看插件的变更历史吧:</p>
<ul>
<li><a href="https://github.com/aidistan/firefox-weixin-danmu/blob/master/HISTORY.md" target="_blank">微信弹幕 Firefox 版</a></li>
<li><a href="https://github.com/aidistan/chrome-weixin-danmu/blob/master/HISTORY.md" target="_blank">微信弹幕 Chrome 版</a></li>
</ul>
<h3 id="contact">联系方式</h3>
<p>欢迎通过一下方式联系我,告知使用中遇到的不便和问题:</p>
<ul>
<li>微信:aidistan</li>
<li>电邮:<a href="mailto:aidistan@live.cn">aidistan@live.cn</a></li>
<li>留言:请前往下方的 <a href="#comments">讨论区</a></li>
</ul>
<div id="qrcode" class="am-g">
<div class="am-u-sm-6 am-text-center">
<h3 class="am-margin-bottom-0">支持我</h3>
<img src="assets/images/qr2pay.png" class="am-img-responsive" alt="pay to aidistan"/>
<h4>微信打赏 ¥9.9 元</h4>
</div>
<div class="am-u-sm-6 am-text-center">
<h3 class="am-margin-bottom-0">联系我</h3>
<img src="assets/images/qr2aidistan.png" class="am-img-responsive" alt="aidistan's qrcode" />
<h4>微信号 aidistan</h4>
</div>
</div>
<h3 id="comments">参与讨论</h3>
<div id="uyan_frame"></div>
<footer class="am-footer am-footer-default">
<div class="am-footer-miscs">
<p>Developed by <a href="https://github.com/aidistan/" target="_blank" >Aidi Stan</a>.</p>
<p>CopyRight © 2015-2016 Aidi Stan. Licensed under the MIT license.</p>
</div>
</footer>
</div>
<script src="assets/js/index.js"></script>
<script type="text/javascript">
var uyan_config = {
'title': '微信弹幕火狐版',
'url': 'http://blog.aidistan.site/2015/01/29/weixin-danmu/',
'du': 'blog.aidistan.site',
'su': 'post-20150129'
};
</script>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1820817"></script>
</body>
</html>