标签： 引用

WordPress 引用 Bilibili.tv 视频方法更新

update：现在 bilibili 官方已提供分享链接功能，这篇文章已经过时。

从业产品经理一年有余，虽非主业，前端知识也多少了解了下。今天发现有人评论老文章《吉原哀歌 外一篇（ WordPress 引用 Bilibili.tv 视频方法）》，反映开启 Adblock 以后会有错位现象。这个我当时也是知道的，使用<iframe>也确属无奈，但在当时而言没有什么好办法，就在 Adblock 给自己的博客加了白名单。

现在再回过头来简单看了一下，发现有更简单的办法，不知道是 Bilibili 更新还是当时看不懂，总之…… 先 Test 一下。

Test 通过

——————

讲方法，一句话：

其中 337840 为视频地址中数字代码，也就是视频 id。从浏览器地址栏就可以得到。bilibili-video-url-example

Bilibili 的播放器原始分辨率大小为 569*440，等比例可选大小为 620*480 或者 640*495。比如我博客就是 640 像素宽的。

——————

讲过程，也是一句话：

在页面原代码里搜索 .swf 就发现了以下代码——

其中有效的其实也就是

这一句了。static.hdslb.com 很明显是静态资源的 CDN 服务器域名，后面自然就是参数了。那么 aid 就是视频 id，page 猜想可能是合集第二页吧，试了一下，果然。http://www.bilibili.tv/video/av672893/index_2.html

于是直接<embed> 到网页原代码里就可以执行了。Wordpress 会自动把它整理成更符合规范的代码，不用管了。

以上，大功告成。

——————–

更新：

使用 <embed> 嵌入 Flash 视频是因为我博客有自动转码，如果你没有，以下是真正的完整代码：

 

——————–
更新

Bilibili 作了少量调整，现在即使非合集/剧集的孤立视频，也必须添加 &page=1 参数了。

吉原哀歌 外一篇（ WordPress 引用 Bilibili.tv 视频方法）

今天，我学会了如何用 <div> 配合 <iframe> 剽窃别人网站上的内容并且只显示所需，隐藏掉不需要的内容=。=

引用方法更新，请到 http://kaikai.info/bilibili-quote/ 查看。

对于提供了引用代码的网站来说，无论想把所需的内容引用到微博、校内甚至自己博客上都是非常容易的。之前写的 Warcraft 历代视频那篇博客也作了尝试，非常简单。

但对于没有提供这一功能，且页面功能比一般视听类网站复杂些的网站内容来说，要想引用就显得有点困难了。比如 Bilibili.tv。

Q： 如何把 Bilibili.tv 的视频引用到自己的博客上，且保持弹幕特色完整？

尝试一：显然是找站点自身的对外分享功能了，结果似乎证明他们的 PM 就是不想提供这样的功能……

尝试二：通过关键词找到 KnH 曾经做过一个 KnDanmakuWP v1.0-BETA 的 WP 插件，兴冲冲地下载安装完按说明，在文章中插入吉原哀歌视频的引用代码，结果……失败。再仔细一看，发现该插件自 2011 年 8 月 5 日出道以后就再没有更新过，估计是 bilibili 网站的代码已经更新而插件没有跟上。

尝试三：考虑到插件还有另外一种方式，即引用 B 站弹幕功能同时引用新浪视频，即文字内容和视频内容分开引用的方式。这一方式要求用户自行解析出 B 站视频源的真实地址，于是问题又化归到查看 B 站网页端源代码上了。经搜索后……又失败了。网页代码中标示视频的 cid 无法还原成真实 id，网上有的老教程也都只解释了针对 bid、uid、ykid 等的反演算。显然，B 站为了保持自己的竞争特色（弹幕字幕评论系统），走了一条与通常视听类网站相反的方式，并不追求共享，反而力图通过加密等方式把用户聚到自己的网站下，绝不为他人做嫁衣装。

尝试四：直接 Copy B 站网页源代码。定位播放器代码段以后，把整个 <div>……</div> 内的所有内容直接复制到了博客文章的源代码下。结果……还是失败。原因任何一个前端工程师甚至只要对代码有点理解的小朋友可能都很明白，但以我的这点知识，真的不知道为啥。

尝试五：于是祭出大杀器 —— <iframe>

部分引用不行，那我就把整个网页都搬过来就行了！思路是：

—— iframe 引用整个页面，设置成指定大小，并定位到所需的位置。 当然最后一段 position 那个是假的，因为第五次失败的原因就出在这里。iframe 是没有办法定义内部引用页面的显示位置的。不过到这里，离胜利已经很接近了，因为思路是正确的。

尝试六：（内事问百度，外事翻墙也要问 Google）果然在 Google 上找到了答案。代码如下：

简单地说，既然 iframe 无法定位内部位置，就让它全部展现（我设置了 1000*1000 px），然后再在外面套上一个指定长宽的 <div>，然后设置遮盖方式，最后再调整 iframe 与 div 之间的相对位置，使得需要显示的部分恰好位于 <div> 之下，如图。当然，中间还涉及一些像素级的长宽位置调整，有个像素尺软件会好很多。

至此，剽窃成功，大功告成回家吃饭。