markdown-it-implicit-figures-video

Render videos occurring by themselves in a paragraph as <figure><video ...></figure>, similar to pandoc's implicit figures for images.

Based on the excellent markdown-it-implicit-figures package by Arve Seljebu.

Example input:

text before ![](video.mp4)

![my video](my_video.mp4 "My Awesome Video")

and it works with links:

[![](fig.png)](page.html)

Output (adjusted for easier reading):

<p>
	text before
	<video src="video.mp4" controls class="html5-video-player">
		Your browser does not support playing HTML5 video. You can
		<a href="video.mp4" download>download the file</a> instead.
	</video>
</p>

<figure>
	<video
		src="my_video.mp4"
		title="My Awesome Video"
		controls
		class="html5-video-player"
	>
		Your browser does not support playing HTML5 video. You can
		<a href="my_video.mp4" download>download the file</a> instead. Here is a
		description of the content: my video
	</video>
</figure>

<p>and it works with links:</p>

<figure>
	<a href="page.html">
		<video src="another_video.mp4" controls class="html5-video-player">
			Your browser does not support playing HTML5 video. You can
			<a href="another_video.mp4" download>download the file</a> instead.
		</video>
	</a>
</figure>

...and the tests to prove it!

Requirements

• The markdown-it-html5-media plugin, which must be used before markdown-it-implicit-figures-video (see usage, below).

Install

$ npm install markdown-it-implicit-figures-video

Usage

import mdi from "markdown-it";
import { html5Media } from "markdown-it-html5-media";
import { implicitFiguresVideo } from "markdown-it-implicit-figures-video";

...

const md = mdi().use(html5Media);

// default options below
md.use(implicitFiguresVideo, {
    copyAttrs: false, // <figure {...videoAttrs}>
    dataType: false, // <figure data-type="video">
    figcaption: false, // adds <figcaption>, possible values
      // true || 'description' => <figcaption>description text</figcaption>
      // 'title' => <figcaption>title text</figcaption>
    tabindex: false, // <figure tabindex="1+n">...
});

const src = 'intro text ![](video.mp4)\n\n![my cool video](my_video.mp4 "This Video Rocks!")\n\nMore text';
const res = md.render(src);

console.log(res);

Options

• copyAttrs: Copy attributes matching (RegExp or string) copyAttrs to figure element.

• dataType: Set dataType to true to add the data-type attribute to <figure> tag (resulting in <figure data-type="video">). This can be useful for applying special styling for different kind of figures.

• figcaption: Can be set to either a boolean or string value.

  • Set figcaption to true or description to put the description text in a <figcaption>-block after the image. For example, ![text](img.png) renders to

  <figure>
  	<img src="img.png" alt="" />
  	<figcaption>text</figcaption>
  </figure>

  • Set figcaption to title to put the title text in a <figcaption> after the image. For example, ![text](img.png "title") renders to

  <figure>
  	<img src="img.png" alt="text" />
  	<figcaption>title</figcaption>
  </figure>

• tabindex: Set tabindex to true to add a tabindex property to each figure, beginning at tabindex="1" and incrementing for each figure encountered.

License

MIT © Eric Woodward