在Hexo搭建的博客中插入音乐或者视频

原文地址在Hexo搭建的博客中插入音乐或者视频
用hexo搭建博客后，记录了自己生活和学习中的很多事情。今天偶然想到能不能在博客中插入音乐和视频呢？然后就开始了今天的历程。。。。

hexo-tag-aplayer

hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件（现已支持 MetingJS）。

安装

npm install --save hexo-tag-aplayer

使用方法——aplayer

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

• title : 曲目标题
• author: 曲目作者
• url: 音乐文件 URL 地址
• picture_url: (可选) 音乐对应的图片地址
• narrow: （可选）播放器袖珍风格
• autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
• width:xxx: (可选) 播放器宽度 (默认: 100%)
• lrc:xxx: （可选）歌词文件 URL 地址
  例如：

{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" %}

如果你觉得前面的方法不太好用，可以用下面的方法，使用MetingJS。

使用方法——MetingJS

MetingJS 是基于Meting API 的 APlayer 衍生播放器，支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
第一步：修改_config.yml配置
在hexo的配置文件_config.yml中添加：

aplayer:
	meting: true

第二步：使用MetingJS 播放器

{% meting "571184509" "xiami" "playlist" %}

有关的选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: netease, tencent, kugou, xiami, baidu
type	必须值	song, playlist, album, search, artist
fixed	false	开启固定模式
mini	false	开启迷你模式
loop	all	列表循环模式：all, one,none
order	list	列表播放模式： list, random
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	false	指定音乐播放列表是否折叠
storagename	metingjs	LocalStorage 中存储播放器设定的键名
autoplay	true	自动播放，移动端浏览器暂时不支持此功能
mutex	true	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	340px	播放列表的最大长度
preload	auto	音乐文件预载入模式，可选项： none, metadata, auto
theme	#ad7a86	播放器风格色彩设置

hexo-tag-dplayer

hexo-tag-dplayer 是 DPlayer 播放器的 Hexo 标签插件

安装

npm install --save hexo-tag-dplayer

使用

{% dplayer key=value ... %}
例：
{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=true" "preload=metadata" "hotkey=true" %} 

有关的选项列表如下:

选项	默认值	描述
url	必须值	视频地址
loop	false	视频循环播放
volume	0.7	播放器音量
hotkey	true	开启热键
autoplay	true	自动播放，移动端浏览器暂时不支持此功能
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
mutex	true	该选项开启时，如果同页面有其他播放，该播放器会暂停
highlight	[]	自定义进度条提示点
preload	auto	视频文件预载入模式，可选项： none, metadata, auto
theme	#ad7a86	播放器风格色彩设置

注：如果使用腾讯视频、优酷视频等在线视频网站的资源，需要先进行视频地址解析，如点量视频解析，获取到实际的视频地址。

其他使用方法

在使用优酷或者腾讯视频时可以直接复制分享代码到文章中，如：

参考文献

• hexo-tag-aplayer
• hexo-tag-dplayer