rehype-video

^{Using my app is also a way to support me:}

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.

``bash
npm install rehype-video
`

Usage

`js
import { unified } from 'unified';
import remark2rehype from 'remark-rehype';
import remarkParse from 'remark-parse';
import rehypeVideo from 'rehype-video';
import stringify from 'rehype-stringify';

const string =
https://files.github.com/001.mp4 hi!

https://files.github.com/002.mp4

Good \idea\!!

https://github.com/002.mp4?!#title=Custom%20Title
;

const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeVideo)
.use(stringify)
.processSync(string)
.toString();
`

Output:

`html


https://files.github.com/001.mp4 hi!

`js
import { rehype } from 'rehype';
import rehypeVideo from 'rehype-video';

const mrkStr =

https://github.com/004.mp4

`html

`

$3

`js
import { rehype } from 'rehype';
import rehypeVideo from 'rehype-video';

const mrkStr =

https://github.com/004.mp4;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeVideo, { details: false })
.processSync(mrkStr)
.toString();
`

Output:

`html

`

$3

`js
import remarkParse from 'remark-parse';
import rehypeVideo from 'rehype-video';
import { unified } from 'unified';
import remark2rehype from 'remark-rehype';
import remarkParse from 'remark-parse';
import stringify from 'rehype-stringify';

const mrkStr = 'https://github.com/user-attachments/assets/0d808e2e-84c7-46ca-a220-440fa9f34118?title=rehype-video&rehype=video'

const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeVideo, {
test: (url) => {
return /\.(mp4|mov)|[?&]rehype=video/i.test(url);
}
})
.use(stringify)
.processSync(mrkStr)
.toString();
`

Output:

`html


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

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

Output:

`html


`js
const 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;
const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeVideo, { })
.use(stringify)
.processSync(mrkStr)
.toString();
`

Output:

`html


`ts
export declare type RehypeVideoOptions = {
/**
* URL suffix verification.
@default /\/(.)(.mp4|.mov)$/
*/
test?: RegExp;
/**
* Support