Hexo 博客添加视频和音乐

Author Avatar
Yusank 4月 09, 2017

找到一个炒鸡流弊的东西。。。

Hexo 博客中插入视频/音乐

博客中插入音乐/视频,可以让博客的逼格瞬间提高。作为优秀的静态博客,Hexo 当然也少不了这些高大上的功能。

Markdown 通用音乐/视频插入方法

Markdown 作为轻量级的标记语言,兼容 html 语法,所以可以直接在 Markdown 文档中使用 html 语法。

vedio 标签

<video width="480" height="320" controls>
<source src="movie.mp4">
</video>

其中在 src 后面需要替换自己的音乐/视频链接

效果:

embed标签

<embed src="http://player.youku.com/player.php/Type/Folder/Fid/27690810/Ob/1/sid/XMTY1MTI3NjMyNA==/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>

ifreame标签

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

网易云音乐网页版提供生成 iframe 标签。

<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=32329501&sid=1776238762&mode=js"></script>

除了 vedio 标签外,大部分音乐/视频网站都可以直接生成播放代码,直接粘贴在 Markdown 文档即可。

不过有些标签不支持 HTTPS。

通过 Hexo 插件插入音频/视频

这里需要两个播放器插件

hexo-tag-aplayer:https://github.com/grzhan/hexo-tag-aplayer#upstream-issue

hexo-tag-dplayer:https://github.com/NextMoe/hexo-tag-dplayer

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

首先安装两款插件

打开 shell,切换到 Hexo 目录下,运行两条目录

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

安装成功后,在 Markdown 文档中添加 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" %}

APlayer 和 DPlayer 具体参数设置可以到 GitHub 项目主页,不过默认参数足够了。

'[00:00.00]Zoobi Doobi
[00:00.38]Sonu Nigam & Shreya Ghoshal
[00:00.53]LRC:Meselson (QQ 445942376)
[00:01.18]
[00:03.50]Gungunati hain yeh hawayein 
[00:12.73]Gungunata hai gagan
[00:19.91]Gaa raha hai yeh saara aalam
[00:26.90]Zoobi do… param pum… 
[00:37.35]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[00:42.67]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann 
[00:47.99]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[00:53.30]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann 
[00:58.34]Shaakhon pe pattey gaa rahe hain Phoolon pe bhanvre gaa rahe
[01:03.69]Deewani kirine gaa rahi hain Yeh panchhi gaa rahe
[01:08.38]Ohhh Bagiya mein do phoolon ki Ho rahi hai guft-gu 
[01:14.02]Jaisa filmon mein hota hai Ho raha hai hu-bahoo
[01:19.18]I iiii iii.. 
[01:20.11]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[01:25.21]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[01:30.52]
[01:30.81]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[01:35.98]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[01:40.68]
[02:02.67]Rimjhim rimjhim rimjhim San san san san hawaa
[02:07.63]Tip tip tip tip boondein Gurrati bijliyaan
[02:13.00]Bheegi bheegi saree mein Yun thumke lagati tu
[02:18.24]Ho raha hai hu bahoo
[02:23.58]I iiii iii.. 
[02:24.23]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[02:29.16]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[02:32.50]
[02:34.30]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[02:39.58]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[02:45.70]
[03:06.55]Amber ka chand zameen par Itra ke gaa raha
[03:12.02]Ek tim tim toota tara Ithla ka gaa raha
[03:17.29]Hai raat akeli tanha Mujhe choo le aake tu
[03:22.47]Jaisa filmon mein hota hai Ho raha hai hubahoo
[03:27.24]I iiii iii.. 
[03:27.78]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[03:33.28]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[03:38.57]Zoobi doobi zoobi doobi pum paara Zoobi doobi param pum
[03:43.79]Zoobi doobi zoobi doobi naache kyun Paagal stupid mann
[03:48.58]LRC:Meselson (QQ 445942376)
[03:50.47]THE END

APlayer 和 DPlayer 均支持 HTTPS。

上述两种方法都有优缺点,选择一种适合自己的方法,打造自己专属的博客吧。

转载:【login926】login926.github.io