本文是参考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>
才行。下面给大家放女票的可爱小短片,希望不要打我(=^ ^=)
<video width="270" height="480" controls> <source src="https://image.leolan.top/1009_cbc659118e3b4856b1a3a966bb0ac230.f0.mp4"> </video>
网站生成代码,点分享即可生成播放代码。
来两段B站小仙女微小微的舞蹈,不谢。
HTML
Flash
音频:
音频分享和视频分享是一样的,也能生成外链播放器代码(有多种标签自由选择),只有网易云音乐是单独有生成按钮的。
<center>
</center>
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/
本文由 Leo 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: May 9, 2017 at 09:54 pm