介绍
在网站制作中，视频媒体已经成为必不可少的一部分，但是在 markdown 格式的文章中，一般并不支持直接插入视频。这就需要使用一些工具来实现视频的插入。markdown-it-video 便是其中之一，它是一个支持将视频转化为 HTML 标签的 npm 包，可大大节省我们在编写 markdown 文章时插入视频的时间。
安装
第一步，我们需要在本地全局安装 npm。
$ npm install npm -g
其次，我们需要在项目文件夹下使用以下命令安装 markdown-it-video：
$ npm install --save-dev markdown-it-video
安装完成后，我们就可以使用 markdown-it-video 来将视频添加到我们的 markdown 文件中了。
使用
在使用 markdown-it-video 之前，我们需要先使用 markdown-it 进行初始化，同时需要安装需要的视频来源支持程序。
- 安装 markdown-it
$ npm i markdown-it --save-dev
- 在项目中初始化 markdown-it：
const md = require('markdown-it')()
// 或者
// import MarkdownIt from 'markdown-it'
// const md = new MarkdownIt()安装完成后便可直接使用 markdown-it 进行文章的解析和转换。
- 安装视频来源支持程序：
markdown-it-video 支持以下常见视频来源：
- YouTube
- Vimeo
- DailyMotion
- Youku
需要手动安装支持程序。
YouTube
$ npm i --save-dev markdown-it-external-links # 如果还未安装 $ npm i --save-dev markdown-it-youtube
-- -------------------- ---- -------
----- -- - ------------------------
----- ------- - ----------------------------
---------------------------------------------------------
--------------- -
-------- - ------ ---- ------- --- --
-
--这样，我们就成功地将 markdown-it-video 集成到了我们的 markdown 项目中，并支持了主要视频源。
此外，我们也可使用其他视频源的支持程序，不过需要根据官方文档选择对应的 package 进行安装，具体使用方式与上述类似。
示例
在文章中使用视频时，我们只需要将视频的链接通过markdown渲染器进行处理，即可将视频渲染成网页支持的 HTML 代码，以下是示例：
@[youtube](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
总结
markdown-it-video 是一个功能强大，易于使用的工具，能够在 markdown 文件中快速的添加视频。通过本文，我们讲解了如何使用 markdown-it-video，支持多种视频来源的扩展程序以及实际的使用示例。相信读者可以通过本文快速上手 markdown-it-video，实现更加丰富的文章内容呈现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63361