Hexo 博客添加视频/音乐的方法

相信很多使用 Hexo 的同学会遇到需要添加视频或者音乐的时候吧,那么具体要怎么实现呢?

插入视频/音乐方法

Hexo 播放器插件插入

下面介绍的这两款插件是基于 DIYgod 编写的 html5 播放器 APlayer 和 DPlayer 开发。

hexo-tag-aplayer:
hexo-tag-dplayer:

在 Git 里面输入命令安装插件:

npm install hexo-tag-dplayer
npm install hexo-tag-aplayer

安装到最后 npm 可能会报错,可以无视。安装成功后,在 Markdown 文档中添加 APlayer 和 DPlayer 标签。

然后在 C:\Hexo\node_modules\aplayer\dist 目录下手动创建文件夹
font。
在 C:\Hexo\node_modules\dplayer\dist 目录下手动创建文件 DPlayer.min.css。
在 C:\Hexo\node_modules\aplayer\dist 目录下手动创建文件 APlayer.min.css文件,文件的内容可以为空,但必须存在该文件。

然后可以测试了,比如添加以下代码使用 APlayer 和 DPlayer:

{% aplayer "Caffeine" "Jeff Williams" "http://7xq131.com1.z0.glb.clouddn.com/Preparation.mp3" "autoplay" %}
{% dplayer "url=http://devtest.qiniudn.com/若能绽放光芒.mp4" "api=http://dplayer.daoapp.io" "pic=http://devtest.qiniudn.com/若能绽放光芒.png" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

Markdown 插入

Markdown 是兼容 html 语法的,所以我们可以直接在 Markdown 文档中使用 html 语法。

vedio 标签

<video width="480" height="320" controls>
<source src="视频或者音乐的直接链接">
</video>

embed 标签

[视频]优酷举例:

<embed src='http://player.youku.com/player.php/sid/优酷哎滴==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

[音乐]网易云音乐举例:

<embed src="//music.163.com/style/swf/widget.swf?sid=30251317&type=2&auto=1&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>

[音乐]虾米音乐举例:

<embed src="http://www.xiami.com/widget/292074908_1773801572/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

iframe 标签

[视频]还是优酷举例:

<iframe height=498 width=510 src="http://player.youku.com/embed/优酷哎滴==" frameborder=0 allowfullscreen></iframe>

[音乐]网易云音乐也举例下:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=30251317&auto=1&height=66"></iframe>

javascript标签

[音乐]虾米举例了:

一般的视频和音乐网站都有分享代码的,大家选择不同的形式复制了粘贴到你的 Markdown 文档中就行了。

插入 Bilibili HTML5 播放器

HTML5 播放器的好处不用多说了,而 Bilibili HTML5 播放器的作者谦谦也是大牛级别的,独自一人开发html5播放器核心组件flv.js,推动了flv.js的开源计划,一个月狂刷4k star,直接冲上github trend榜!
B站 HTML5 播放器用 js 重新封装 flv 喂给浏览器还开源了

只需在 md 文档中插个 iframe 标签就行,aid 和 cid 值需要手动填写,播放器大小可以自己调节:

<iframe src="http://www.bilibili.com/html/html5player.html?aid=3521416&cid=6041635" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

那么如何获取视频的 aid 和 cid 值呢?B 站每个视频都有对应的 aid 和 cid 值,在视频网页的源代码中可以找到,大概在 380 行左右就能看到,只需复制源代码中的 aid 和 cid 值,再粘贴到上一步中的 iframe 标签代码中即可。

但由于 B 站播放器是 http 资源,所以如果你的 Hexo 博客启用了 https 的话,可能对 B 站播放器并不友好。在 Chrome 和
Firefox 一类浏览器中需要手动允许才能显示出播放器。


参考文章简书作者Login926

chiba kaza wechat
This is my sister's WeChat public number,She asked me to put here.
亲爱的你好,欢迎打我~啊!不是~赏我!