0%

WoWA 纸片人和嵌入 B 站视频

缘起

前几天忘了从哪里了解到一个霓虹国高手做的「二次元纸片人舞蹈」生成器。自己涂鸦纸娃娃,一键生成好欢乐的舞蹈。咦,我真是很迷这种没心没肺的小玩意儿!

不才画了一个,特此发表。

过程

WoWA 纸片人舞蹈生成器

打完字才发觉这名字老 MoMA 了!

生成器的全称是 Wonder of Wonder Art,地址:https://aidn.jp/wowa/

玩法很简单,不多介绍。效果直接看我的作品:

对了,我给我的纸娃娃起名叫「呆囧-悟」,西文名 Deja-Vu(误)。

版权所有,欢迎合作开发 ^^

在 Hexo 中嵌入 B 站视频

上文的视频是我在 Bilibili 的投稿,嵌入到博文中。利用 B 站是因为 B 站没有贴片广告(但会限制视频质量)。在博文中嵌入第三方平台的视频不是什么难事,但我觉得还是有一些小坑,有必要解释一下具体方法。

iframe 方法

在视频页面通过分享按钮获得嵌入代码:

代码复制出来长这个样:

<iframe src="//player.bilibili.com/player.html?aid=625580774&bvid=BV1Vt4y117BW&cid=185974894&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

可以在 .md 文章中直接插入上面的代码。

也可以为了保险,多写几行,如下:

{% raw %}

<div style="position: relative; width: 100%; height: 100%;">
<iframe src="//player.bilibili.com/player.html?aid=625580774&bvid=BV1Vt4y117BW&cid=185974894&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

{% endraw %}

其中,前后的 raw 标签是 Hexo 提供的安全插入 html 代码的方法。div 标签则方便做些样式定义,而避免改动所复制的嵌入代码。

这段代码的实际效果就是上文所见的视频。

插件方法

曾经有这么一个神奇的插件 hexo-tag-bilibili ,能让之前那一长串代码简化成一行搞定。

安装:

$ cd <路径>/hexo
$ npm install --save hexo-tag-bilibili

编辑 _config.yml 可配置默认宽高:

bilibili:
width: 452
height: 544

安装后即可在 .md 文章中使用如下标签插入视频:

{% bilibili [av_id] [page] %}

其中的 av_id 即视频的 av 号,纯数字不用带 av 前缀。page 即视频的 P 号,可省略。

要注意的是,B 站已经全面启用 bv 号代替 av 号 。本插件多年未更新,暂不支持 bv 号。目前 av 号仍能在 B 站的视频链接中找到,即上文所述嵌入代码中 aid=625580774 的数字串部分。

于是,举个栗子:

{% bilibili 625580774 %}

插入文章并发布,前端效果和 iframe 方法所呈现的视频等效。

相比而言,使用插件能简化工作,但缺点很明显:

  1. 无法在本地 markdown 编辑器中所见即所得

  2. 长远来看 B 站视频的 av 号有彻底淘汰的风险

所以我并不推荐使用插件方法。

结语

好了,今日份的折腾告一段落。休息一下,劈个叉吧。

EOF