使用Markdown语言在博客的文章中添加视频
注:此博文来自转载, 在此对原作者表示感谢。
不论你是用的是什么博客系统,WP也好,Typecho也罢,甚至是静态博客,就像我的博客,绕不开的是两种书写语言,一种称之为富文本,一种叫做Markdown。我的博客就是用Markdown写的。
Markdown有很多好处,也有很多坏处,比如说居中,Markdown本身没有这个功能。再比如说视频,Markdown也不具有插入视频的功能。
值得庆幸的是Markdown支持HTML的标签,在HTML中我们可以用<video>
标签插入视频,在Markdown中,我们同样可以使用<video>
标签插入视频,具体格式如下:
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">
</video>
或者
<video src="movie.mp4.mp4" controls="controls" width="500" height="300"></video>
当然,除了.mp4
它还支持其他的格式,但是对于不同的浏览器支持的格式不一样,见下表:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
当然还有编码等限制,这里就不再介绍,感兴趣的小伙伴可以百度上学习一下。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。
用法:
1. <video width="500" height="250" controls="controls">2. <source src="movie.ogg" type="video/ogg">3. <source src="movie.mp4" type="video/mp4">4. 您的浏览器不支持此种视频格式。5. </video>
其次,这是对一些参数的说明:
autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"height:设置高度 width:设置宽度loop:自动重播,用法:loop="loop"preload:视频在页面加载时进行加载并预备播放,用法:preload="auto" - 当页面加载后载入整个视频;preload="meta" - 当页面加载后只载入元数据;preload="none" - 当页面加载后不载入视频。注意:若使用了autoplay,则忽略preloadsrc:要播放视频的url
示例:
第一种:
<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>
第二种:
<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>
使用Markdown语言在博客的文章中添加视频相关推荐
- 如何在博客等文章中添加带有滚动条的文本框
在博客中添加带滚动条的文本框能大大提高文章的可读性. 1. 以csdn博客为例 我们在csdn发布博客的时候会在编辑区看到一个源代码的工具. 注:各类博客产品是不一样的,有的可能是个复选框 2. 我们 ...
- 在线文本替换工具 、支持正则表达式(博客园文章里添加Javascript或<script>语句)
概况与介绍 在博客园发布一篇文章,文章就是<在线文本替换工具 .支持正则表达式>https://www.cnblogs.com/lsllll44/articles/15522697.htm ...
- 使用CSDN MarkDown编辑器写博客-班志华-专题视频课程
使用CSDN MarkDown编辑器写博客-13183人已学习 课程介绍 简单介绍如何使用CSDN的Markdown编辑器来写博客. 课程收益 使用CSDN的MarkDown编 ...
- 如何在CSDN博客自定义栏目中添加“给我写信”
在"自定义栏目"中添加"连接"(将自己的微博,QQ空间和CSDN博客关联起来)很多人都做过.但是添加"给我写信"这个功能,用的好像不太多.此 ...
- 使用MarkDown标记语言发博客
使用MarkDown标记语言发博客 第一步:将博客园编辑器设置为Markdown 登录博客园,进入自己的博客首页,点击管理-〉选项,如下图所示. 在默认编辑器中选择Mardown,然后单击SAVE保存 ...
- [开源] 分享导出博客园文章成本地 Markdown 文件存储的工具
此文主要分享了如何将自己博客园的文章自动导出到 Markdown 文档进行存储,以便在本地进行归档管理,程序中也对文章的分类.tag.代码块以及文章中的图片进行了保存处理,以便上传到自己的图. 整理后 ...
- GitHub搭建的个人博客发表文章
GitHub搭建的个人博客发表文章 使用markdown语言 可以使用cdsn直接编写文章然后导出成.md文件 放到source下面的_posts文件中 标题改一下 最后 hexo s hexo g ...
- 如何优雅的使用markdown来写博客
如何优雅的使用markdown来写博客 重构写作方式 学会Markdown基本语法 实践Markdown语法,写出优质文章 文章目录 如何优雅的使用markdown来写博客 一.认识Markdown ...
- 【开源】博客园文章编辑器4.0版发布
源起 最近个人时间多起来了: 于是打算持续写一点东西: 前面写了两篇关于riot.js的东西: 被博客园的领导移出首页了: 原因之一是排版不整齐: 确实是不整齐,这我认, 然而,我自己可是博客园文章编 ...
最新文章
- python dict批量选择_Python 中有 3 个不可思议的返回功能
- leetcode 576. Out of Boundary Paths | 576. 出界的路径数(暴力递归->傻缓存->dp)
- Java从键盘输入若干数_用java编程序:从键盘输入若干个整数,输出这些数中大于其平均值的数。...
- 如何快速清除 Ubuntu 的系统缓存
- [论文阅读] Exploring Dense Context for Salient Object Detection
- 1124Js基础语法
- Arduino uno LED灯实验
- 软件测试正交表用在哪里,使用正交试验法设计测试用例中的一些常用的正交表...
- 线性时间选择(C++):求第k小的数
- 艾孜尔江_国二MS Office考试Excel函数常考知识点
- Ubuntu14.04 学习一:adobe Flash 下载和安装
- 17AHU排位赛2 A题(最小生成树、LCA维护树上路径)
- Kettle PDI工具连接Mysql时报Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found, make sure the ‘MySQL
- CPSR SPSR
- 基于STM32的ESP8266模块控制多路继电器
- ACM常用的解题技巧:尺取法
- 官方免费工具(ODT)安装新版 Office2021【视频演示】
- BBS项目分布搭建四(点赞点踩及评论功能)
- 怎么用蓝光u宝装linux系统,蓝光U宝U盘启动盘制作工具V3.3(完整版)使用教程
- python pymssql连接本地SQL SERVER