LeoLan‘s Blog
Published on

博客中插入音乐_视频

Authors
  • avatar
    Name
    Leo
    Twitter

本文是参考Raintons的博文写的。感谢Raintons的文章。

Markdown 通用插入方法

Markdown 作为轻量级的标记语言，兼容 html 语法，可以直接在 Markdown 文档中使用 html 语法。 大部分音乐、视频网站都可以直接生成播放器代码(尽量用直接生成的代码)，直接粘贴到 Markdown 文档中即可。有些标签不支持 https，尽量选支持https的网站，因为https网站加载http资源会被屏蔽掉，简单的在http地址后加个s测试即可知道是否支持https 。

Html居中代码： <center>我是内容，替换我</center> 或<blockquote class="blockquote-center">我是内容，替换我</blockquote>

视频：

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

经测试不支持内嵌优酷之类的flash播放，src后面的地址要指向视频文件。width和height最好填写好对应视频的大小，不然周围有边框不好看。视频居中要用<blockquote class="blockquote-center">我是内容，替换我</blockquote>才行。下面给大家放女票的可爱小短片，希望不要打我(=^ ^=)

网站生成代码，点分享即可生成播放代码。 mark

来两段B站小仙女微小微的舞蹈，不谢。

HTML

Flash

音频：

音频分享和视频分享是一样的，也能生成外链播放器代码（有多种标签自由选择），只有网易云音乐是单独有生成按钮的。 mark

dplayer插件插入

安装

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

首先安装两款插件

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

安装到最后 npm 可能会报错，忽视即可。

安装成功后，在 Markdown 文档中添加 APlayer 和 DPlayer 标签即可,比如添加如下代码使用 APlayer 和 DPlayer(此处无耻的copy代码)：

{% 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" %}

hexo s时如果报错，看看报什么错，报找不到目录或找不到文件错误就按提示创建目录或文件（文件内容可以为空，但必须存在该文件）

音频

参考： https://github.com/DIYgod/APlayer https://github.com/grzhan/hexo-tag-aplayer#upstream-issue

{% aplayer "Apple Stone" "Lost" autoplay :music="https://image.leolan.top//blog/Apple%20&%20Stone%20-%20Lost.mp3" %}

视频：

参考： https://github.com/NextMoe/hexo-tag-dplayer https://github.com/DIYgod/DPlayer

{% dplayer "url=http://devtest.qiniudn.com/若能绽放光芒.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=http://dplayer.donot.help/dplayerpy" "pic=http://devtest.qiniudn.com/若能绽放光芒.png" "id=2622668" "loop=yes" "theme=#FADFA3" "autoplay=false" "width=233px" %}

HTML标签和dplayer对比

|项目|使用难度|是否支持https|是否使用html5| |---|---|---|---|---|---|---| |插入html语言|小|大部分不支持|大部分使用Flash| |使用Hexo插件|中等|支持|使用html5|

此功能太实用了，看了Raintons的博文不禁心动，自己尝试了一番，感觉甚好，原文地址：http://login926.top/2016/07/20/HexoMedia/

Discuss on Twitter • View on GitHub