在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 播放器

<!-- 简单示例 (id, server, type)  -->
{% meting "571184509" "xiami" "playlist" %}

有关的选项列表如下:

选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式:all, one,none
orderlist列表播放模式: list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
mutextrue该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置

hexo-tag-dplayer

hexo-tag-dplayerDPlayer 播放器的 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必须值视频地址
loopfalse视频循环播放
volume0.7播放器音量
hotkeytrue开启热键
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
logo-在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
mutextrue该选项开启时,如果同页面有其他播放,该播放器会暂停
highlight[]自定义进度条提示点
preloadauto视频文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置

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

其他使用方法

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

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

参考文献

  • 5
    点赞
  • 30
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

倚马古道

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值