直接插入

直接插入的好处是无需任何的插件

插入音乐

音乐链接获取

生成链接

音乐代码

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

注意长宽

插入视频

视频要注意，插入的视频必须是视频的原URL

插入视频代码

1
2
3
4
5
6
7
<iframe 
    width="800" 
    height="450" 
    src='https://player.youku.com/embed/XNDE5NjYzOTg0OA=='
    frameborder="0" 
    allowfullscreen>
</iframe>

注意长宽，长宽可以是视频分辨率

使用插件

本文参考hexo-tag-mmedia

简介

hexo-tag-mmedia 是 MonoLogueChi 自用的一个媒体插入插件，在添加部分功能后发布给大家使用

建议

个人推荐的话，音乐插入建议是MetingJS音乐插件，视频的话是Bilibili视频插件

支持的平台

使用

本插件与以下插件冲突

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

如有安装，使用前请卸载。

1
2
3
npm uninstall hexo-tag-aplayer
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-bilibili

安装

1
npm install hexo-tag-mmedia --save

需要修改主目录下的_config.yml ，一般无需修改直接使用即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
mmedia:
  aplayer:
    cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
    default:
  meting:
    cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
    api:
    default:
  dplayer:
    cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
    hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
    dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:

default 项下可配置默认选项，例如：

1
2
3
4
5
meting:
  cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
  api:
  default:
    order: random

MetingJS音乐插件

在文件直接插入以下代码即可，注意一下，如果是Typora的话需要切换成源码模式再插入

示例

1
2
3
{% meting "001Mf4Ic1aNYYK" "tencent" "album" "order:random" "listmaxheight:180px" %}

{% meting "auto:https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html" "autoplay" %}

参数

基本兼容 hexo-tag-aplayer，绝大部分可以直接从 hexo-tag-aplayer 迁移，参数形式为 "option:vaule"，不懂的可以参考 MetingJS

配置项 默认 描述
id 必须 音乐 id，第一个参数
server 必须 音乐平台，第二个参数，可选： netease , tencent , kugou ,xiami , baidu
type 必须 音乐类型，第三个参数，可选： song , playlist , album``search , artist
auto 无 有 auto 选项时前面参数不需要填写，否则为必填，见示例 2
autoplay false 自动播放，带有此参数表示 true ，不带表示 false
fixed false 吸底模式，带有此参数表示 true ，不带表示 false
mini false 迷你模式，带有此参数表示 true ，不带表示 false
listfolded false 默认折叠列表，带有此参数表示 true ，不带表示 false
mutex true 互斥，如不需互斥 "mutex:false"
theme #2980b9 主题颜色
loop all 循环模式 ，可选值 all , one , none
order list 播放顺序，可选值 list , random
preload auto 预加载模式 ，可选 none , metadata , auto
volume 0.7 默认音量，可选 0-1
lrctype 0 歌词类型
listmaxheight 340px 播放器最大高度
storagename metingjs

后端服务器可以使用官方后端，也可以使用我自己写的后端服务器 MetingJS.Server 自建服务。

演示

音乐列表形式

单首音乐

Aplayer音乐插件

示例

1
2
3
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

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

参数

配置项 默认 描述
title 必须 曲目标题，第一个参数
author 必须 曲目作者，第二个参数
url 必须 音乐文件地址
picture_url 音乐对应的图片地址
narrow false 袖珍风格，带有此参数表示 true ，不带表示 false
autoplay false 自动播放，带有此参数表示 true ，不带表示 false
width:xxx 100% 播放器宽度
lrc 歌词地址

AplayerList（不推荐使用）

警告

此模式测试不够完善，如果遇到问题请提 issue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
    "narrow": false,             // Optional, narrow style
    "autoplay": true,            // Optional, autoplay song(s), not supported by mobile browsers
    "mode": "random",            // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    "showlrc": 3,                // Optional, show lrc, can be 1, 2, 3
    "mutex": true,               // Optional, pause other players when this player playing
    "theme": "#e6d0b2",	         // Optional, theme color, default: #b7daff
    "preload": "metadata",       // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    "listmaxheight": "513px",    // Optional, max height of play list
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

Dplayer视频插件

示例

1
{% dplayer "url:KeyCastOW.mp4" "id:DDEC4F882C0B66FAD" "addition:addition0" "addition:addition1" %}

参数

非必填项，如果不清楚请不要填写。

配置项 默认 描述
url 必填 视频地址
pic 封面
thumbnails 缩略图
type auto 视频格式，可选 auto hls dash shakaDash flv webtorrent
id 弹幕 id，建议使用视频的 CRC 或 MD5，再或使用 UUID
api 弹幕 api
token
maximum 10000 最大弹幕数
user DIYgod 弹幕发送用户名
bottom 15% 弹幕底端距离
unlimited true
addition 额外弹幕，可重叠加多个
suburl 字幕地址
subtype webvtt 字幕类型，可选 webvtt ass
subbottom 40px 字幕底端距离
subfontSize 20px 字幕字体大小
subcolor #fff 字幕字体颜色
autoplay false 自动播放，带有此参数表示 true，不带表示 false
loop false 循环，带有此参数表示 true，不带表示 false
screenshot false 截屏按钮，带有此参数表示 true，不带表示 false，此参数会造成跨域
hotkey true 热键控制
mutex true 互斥
theme #b7daff 主题颜色
lang 语言，不指定会根据浏览器环境自动识别
preload auto 预加载，可选 none metadata auto
logo logo 地址
volume 0.7 默认音量 0-1
contextmenu 右键菜单，可叠加
highlight 高光点，可叠加多个，例如 "highlight:{time: 20, text: '这是第 20 秒'}"
code 额外代码，不懂不要填，需要写的请参考源码

演示

Bilibili视频插件

视频还是强烈推荐Bilibili的，毕竟视频又全又好用，关键免费

示例

1
{% bilibili "aid:60016166" "quality:high" "danmaku" "allowfullscreen" %}

配置

配置项 默认 描述
aid 必填 视频 av 号，填写 av 时非必填
av 视频链接地址，不要带分 P 信息，与 aid 同时填写会被覆盖
page 1 分 P，填写 av 时才会生效
quality low 视频质量，可选 high low
danmaku false 开启弹幕，带有此参数表示 true，不带表示 false
allowfullscreen true 是否允许全屏
width 100% 宽度
height 500px 高度
margin auto 位置，css 属性，例： "margin:auto" "margin:0 0 0 auto"

演示