rehype-video

Add improved video syntax: links to .mp4 and .mov turn into videos. like github video features.

The following is a sample test of the video preview in GitHub:

https://user-images.githubusercontent.com/1680273/138299599-88547edd-859c-44c9-8b52-2cc06f7f2dd3.mov?!#title=Example%20Display

Installation

This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.

1npm install rehype-video

Usage

1import { unified } from 'unified';
2import remark2rehype from 'remark-rehype';
3import remarkParse from 'remark-parse';
4import rehypeVideo from 'rehype-video';
5import stringify from 'rehype-stringify';
6
7const string = `
8https://files.github.com/001.mp4 hi!
9
10https://files.github.com/002.mp4
11
12Good \`idea\`!!
13
14https://github.com/002.mp4?!#title=Custom%20Title
15`;
16
17const htmlStr = unified()
18  .use(remarkParse)
19  .use(remark2rehype, { allowDangerousHtml: true })
20  .use(rehypeVideo)
21  .use(stringify)
22  .processSync(string)
23  .toString();

Output:

1<p>https://files.github.com/001.mp4 hi!</p>
2<details open>
3  <summary>
4    <svg aria-hidden height="16" width="16" viewBox="0 0 16 16" version="1.1" class="octicon octicon-device-camera-video"><path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path></svg>
5    <span aria-label="Video description 002.mp4">002.mp4</span>
6    <span class="dropdown-caret"></span>
7  </summary>
8  <video muted controls style="max-height:640px;" src="https://github.com/002.mp4"></video>
9</details>
10<p>Good <code>idea</code>!!</p>
11<details open>
12  <summary>
13    <svg aria-hidden height="16" width="16" viewBox="0 0 16 16" version="1.1" class="octicon octicon-device-camera-video"><path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path></svg>
14    <span aria-label="Video description Custom Title">Custom Title</span>
15    <span class="dropdown-caret"></span>
16  </summary>
17  <video muted controls style="max-height:640px;" src="https://github.com/002.mp4"></video>
18</details>

Example 1

1import { rehype } from 'rehype';
2import rehypeVideo from 'rehype-video';
3
4const mrkStr = `<p>https://github.com/004.mp4</p>`;
5const htmlStr = rehype()
6  .data('settings', { fragment: true })
7  .use(rehypeVideo, { details: false })
8  .processSync(mrkStr)
9  .toString();

Output:

1<video muted controls style="max-height:640px;" src="https://github.com/004.mp4"></video>

Example 2

1import { rehype } from 'rehype';
2import rehypeVideo from 'rehype-video';
3
4const mrkStr = `<p><a href="https://github.com/004.mp4">https://github.com/004.mp4</a></p`;
5const htmlStr = rehype()
6  .data('settings', { fragment: true })
7  .use(rehypeVideo, { details: false })
8  .processSync(mrkStr)
9  .toString();

Output:

1<video muted controls style="max-height:640px;" src="https://github.com/004.mp4"></video>

Custom Title

Define custom title parameter(E.g: title=RehypeVideo) with hash route:

1const string = `https://github.com/002.mp4?!#title=Custom%20Title`;
2const htmlStr = unified()
3  .use(remarkParse)
4  .use(remark2rehype, { allowDangerousHtml: true })
5  .use(rehypeVideo)
6  .use(stringify)
7  .processSync(string)
8  .toString();

Output:

1<details open>
2  <summary>
3    <svg aria-hidden height="16" width="16" viewBox="0 0 16 16" version="1.1" class="octicon octicon-device-camera-video"><path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path></svg>
4    <span aria-label="Video description Custom Title">Custom Title</span>
5    <span class="dropdown-caret"></span>
6  </summary>
7  <video muted controls style="max-height:640px;" src="https://github.com/002.mp4"></video>
8</details>

<track>

We will reference all two of the relevant VTT files by adding <track> elements inside our HTML <video> element:

1const mrkStr = `https://github.com/sintel-short.mp4?!#track['en']=captions/vtt/sintel-en.vtt&track['en:label']=English&track['en:kind']=subtitles&track['en:default']=true&track['de']=captions/vtt/sintel-de.vtt&track['de:label']=Deutsch&track['de:kind']=subtitles`;
2const htmlStr = unified()
3  .use(remarkParse)
4  .use(remark2rehype, { allowDangerousHtml: true })
5  .use(rehypeVideo, { })
6  .use(stringify)
7  .processSync(mrkStr)
8  .toString();

Output:

1<details open class="octicon octicon-video">
2  <summary>
3    <svg aria-hidden height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component class="octicon octicon-device-camera-video">
4      <path fill-rule="evenodd" d="M16 3.75a.75.75 0 00-1.136-.643L11 5.425V4.75A1.75 1.75 0 009.25 3h-7.5A1.75 1.75 0 000 4.75v6.5C0 12.216.784 13 1.75 13h7.5A1.75 1.75 0 0011 11.25v-.675l3.864 2.318A.75.75 0 0016 12.25v-8.5zm-5 5.075l3.5 2.1v-5.85l-3.5 2.1v1.65zM9.5 6.75v-2a.25.25 0 00-.25-.25h-7.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-4.5z"></path>
5    </svg>
6    <span aria-label="Video description sintel-short.mp4">sintel-short.mp4</span>
7    <span class="dropdown-caret"></span>
8  </summary>
9  <video muted controls style="max-height:640px;" src="https://github.com/sintel-short.mp4?!#track[&#x27;en&#x27;]=captions/vtt/sintel-en.vtt&#x26;track[&#x27;en:label&#x27;]=English&#x26;track[&#x27;en:kind&#x27;]=subtitles&#x26;track[&#x27;en:default&#x27;]=true&#x26;track[&#x27;de&#x27;]=captions/vtt/sintel-de.vtt&#x26;track[&#x27;de:label&#x27;]=Deutsch&#x26;track[&#x27;de:kind&#x27;]=subtitles">
10    <track kind="subtitles" src="captions/vtt/sintel-en.vtt" label="English" default>
11    <track kind="subtitles" src="captions/vtt/sintel-de.vtt" label="Deutsch">
12  </video>
13</details>

Options

1export declare type RehypeVideoOptions = {
2  /**
3   * URL suffix verification.
4   * @default /\/(.*)(.mp4|.mov)$/
5   */
6  test?: RegExp;
7  /**
8   * Support `<details>` tag to wrap <video>.
9   * @default true
10   */
11  details?: boolean;
12  /**
13   * Support `<track>` tag to wrap <video>.
14   * @default true
15   */
16  track?: boolean;
17};

Related

• rehype-attr New syntax to add attributes to Markdown.
• rehype-rewrite Rewrite element with rehype.
• rehype-ignore Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
• remark-github-blockquote-alert Remark plugin to add support for GitHub Alert

License

MIT © Kenny Wong