博客中插入音乐_视频
     分类:杂项     有: 0 条评论

博客中插入音乐_视频

     分类:杂项     有: 0 条评论

本文是参考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后面的地址要指向视频文件。widthheight最好填写好对应视频的大小,不然周围有边框不好看。视频居中要用<blockquote class="blockquote-center">我是内容,替换我</blockquote>才行。下面给大家放女票的可爱小短片,希望不要打我(=^ ^=)

<video width="270" height="480" controls> <source src="https://image.leolan.top/1009_cbc659118e3b4856b1a3a966bb0ac230.f0.mp4";> </video>

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


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

HTML

Flash


音频:

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

<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/


(●゚ω゚●)