Markdown在博客中添加视频

Markdown有很多好处，也有很多坏处，比如说居中，Markdown本身没有这个功能。再比如说视频，Markdown也不具有插入视频的功能。

值得庆幸的是Markdown支持HTML的标签，在HTML中我们可以用<video>标签插入视频，在Markdown中，我们同样可以使用<video>标签插入视频，具体格式如下：

1
2
3
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

或者

1
<video src="movie.mp4.mp4" controls="controls" width="500" height="300"></video>
  • 当然，除了.mp4它还支持其他的格式，但是对于不同的浏览器支持的格式不一样，见下表：
格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No
其次，这是对一些参数的说明：
1
2
3
4
5
6
7
8
9
10
11
autoplay :出现该属性意味着视频在就绪后将自动播放，用法：autoplay="autoplay"

controls :出现该属性意味着向用户显示控件，如播放按钮等，用法：controls="controls"

height:设置高度      width:设置宽度

loop:自动重播，用法：loop="loop"

preload:视频在页面加载时进行加载并预备播放，用法：preload="auto" - 当页面加载后载入整个视频；preload="meta" - 当页面加载后只载入元数据；preload="none" - 当页面加载后不载入视频。注意：若使用了autoplay，则忽略preload

src:要播放视频的url
  • 示例：
    第一种：
1
2
3
<video width="720" height="303" controls> #或者：<video width:60% height:auto controls>
<source src="https://movie.cy798.cn/%E9%BB%91%E8%B1%B9.Black.Panther.2018.BD720P.X264.AAC.English.CHS-ENG.mp4" type="video/mp4">
</video>

第二种：

1
<video src="https://movie.cy798.cn/Blue.Planet.S02.2017.BluRay.1080p.DTS-HD.MA5.1.2Audio.x264-CHD/Blue.Planet.S02E01.One.Ocean.2017.BluRay.1080p.DTS-HD.MA5.1.2Audio.x264-CHD.mkv" controls="controls" width:100% height:auto></video>