logo头像
Snippet 博客主题

Markdown怎么嵌入图片、音乐、视频?

本文于926天之前发表,文中内容可能已经过时。

到目前为止,我的博客中几乎清一色的文本,偶尔夹杂图片。但是有些需求要嵌入其他多媒体,于是想了解一下怎样在博文中嵌入音乐、视频、flash等多媒体文件。
实际上,在hexo中,markdown支持html标签,md文件解析为html时原有的html部分会保留。有基于此,我们只要在文中插入符合html规范的代码即可。下面举例说明。

图片

MD语法代码:

1
![](http://ww4.sinaimg.cn/cmw218/005uPDlbgw1f1drj093cej30zk0qon4d.jpg)

效果:

HTML代码:

1
<img src="http://ww4.sinaimg.cn/cmw218/005uPDlbgw1f1drj093cej30zk0qon4d.jpg" alt="美女">

效果:
美女

音乐

以『虾米音乐』为例,歌曲页面有个『转帖』选项,将html代码或javascript代码复制到文中即可。

普通HTML代码:

1
<embed src="http://www.xiami.com/widget/0_3515679/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

效果:

HTML5代码:

1
2
3
<audio src="http://www.xiami.com/widget/0_3515679/singlePlayer.swf" controls="controls">
Your browser does not support the audio tag.
</audio>

效果:

视频

嵌入视频的方法和音乐类似,视频网站每个视频页面都会有一个『分享』或『转帖』按钮,点击可以查看代码。

普通HTML代码:

1
<iframe height=498 width=510 src="http://lxqncdn.miaopai.com/stream/BvmaXK2X49guVi4ehlOjjQ__.mp4" frameborder=0 allowfullscreen></iframe>

效果:

HTML5代码:

1
2
3
<video src="http://lxqncdn.miaopai.com/stream/BvmaXK2X49guVi4ehlOjjQ__.mp4" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

效果:

万能

对于有些音乐、视频找不到『转帖』按钮的,可以查看源代码,找到相应的代码块贴在文中。若找不到,说明该文件的确不能放在自己文中了。

上一篇
Error: Comments Not Initialized