Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2
Add improved video syntax: links to `.mp4` and `.mov` turn into videos.
License
NotificationsYou must be signed in to change notification settings
jaywcjlove/rehype-video
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Add improved video syntax: links to.mp4 and.mov turn into videos. likegithub video features.
The following is a sample test of the video preview in GitHub:
test.mov
This package isESM only: Node 12+ is needed to use it and it must be import instead of require.
npm install rehype-video
import{unified}from'unified';importremark2rehypefrom'remark-rehype';importremarkParsefrom'remark-parse';importrehypeVideofrom'rehype-video';importstringifyfrom'rehype-stringify';conststring=`https://files.github.com/001.mp4 hi!https://files.github.com/002.mp4Good \`idea\`!!https://github.com/002.mp4?!#title=Custom%20Title`;consthtmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeVideo).use(stringify).processSync(string).toString();
Output:
<p>https://files.github.com/001.mp4 hi!</p><detailsopen><summary><svgaria-hiddenheight="16"width="16"viewBox="0 0 16 16"version="1.1"class="octicon octicon-device-camera-video"><pathfill-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><spanaria-label="Video description 002.mp4">002.mp4</span><spanclass="dropdown-caret"></span></summary><videomutedcontrolsstyle="max-height:640px;"src="https://github.com/002.mp4"></video></details><p>Good<code>idea</code>!!</p><detailsopen><summary><svgaria-hiddenheight="16"width="16"viewBox="0 0 16 16"version="1.1"class="octicon octicon-device-camera-video"><pathfill-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><spanaria-label="Video description Custom Title">Custom Title</span><spanclass="dropdown-caret"></span></summary><videomutedcontrolsstyle="max-height:640px;"src="https://github.com/002.mp4"></video></details>
import{rehype}from'rehype';importrehypeVideofrom'rehype-video';constmrkStr=`<p>https://github.com/004.mp4</p>`;consthtmlStr=rehype().data('settings',{fragment:true}).use(rehypeVideo,{details:false}).processSync(mrkStr).toString();
Output:
<videomutedcontrolsstyle="max-height:640px;"src="https://github.com/004.mp4"></video>
import{rehype}from'rehype';importrehypeVideofrom'rehype-video';constmrkStr=`<p><a href="https://github.com/004.mp4">https://github.com/004.mp4</a></p`;consthtmlStr=rehype().data('settings',{fragment:true}).use(rehypeVideo,{details:false}).processSync(mrkStr).toString();
Output:
<videomutedcontrolsstyle="max-height:640px;"src="https://github.com/004.mp4"></video>
importremarkParsefrom'remark-parse';importrehypeVideofrom'rehype-video';import{unified}from'unified';importremark2rehypefrom'remark-rehype';importremarkParsefrom'remark-parse';importstringifyfrom'rehype-stringify';constmrkStr='https://github.com/user-attachments/assets/0d808e2e-84c7-46ca-a220-440fa9f34118?title=rehype-video&rehype=video'consthtmlStr=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:
<detailsopenclass="octicon octicon-video"><summary><svgaria-hiddenheight="16"width="16"viewBox="0 0 16 16"version="1.1"data-view-componentclass="octicon octicon-device-camera-video"><pathfill-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><spanaria-label="Video description rehype-video">rehype-video</span><spanclass="dropdown-caret"></span></summary><videomutedcontrolsstyle="max-height:640px;"src="https://github.com/user-attachments/assets/0d808e2e-84c7-46ca-a220-440fa9f34118?title=rehype-video&rehype=video"></video></details>
Define custom title parameter(E.g:title=RehypeVideo) with hash route:
conststring=`https://github.com/002.mp4?!#title=Custom%20Title`;consthtmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeVideo).use(stringify).processSync(string).toString();
Output:
<detailsopen><summary><svgaria-hiddenheight="16"width="16"viewBox="0 0 16 16"version="1.1"class="octicon octicon-device-camera-video"><pathfill-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><spanaria-label="Video description Custom Title">Custom Title</span><spanclass="dropdown-caret"></span></summary><videomutedcontrolsstyle="max-height:640px;"src="https://github.com/002.mp4"></video></details>
We will reference all two of the relevant VTT files by adding<track> elements inside our HTML<video> element:
constmrkStr=`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`;consthtmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeVideo,{}).use(stringify).processSync(mrkStr).toString();
Output:
<detailsopenclass="octicon octicon-video"><summary><svgaria-hiddenheight="16"width="16"viewBox="0 0 16 16"version="1.1"data-view-componentclass="octicon octicon-device-camera-video"><pathfill-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><spanaria-label="Video description sintel-short.mp4">sintel-short.mp4</span><spanclass="dropdown-caret"></span></summary><videomutedcontrolsstyle="max-height:640px;"src="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"><trackkind="subtitles"src="captions/vtt/sintel-en.vtt"label="English"default><trackkind="subtitles"src="captions/vtt/sintel-de.vtt"label="Deutsch"></video></details>
exportdeclaretypeRehypeVideoOptions={/** * URL suffix verification. *@default /\/(.*)(.mp4|.mov)$/ */test?:RegExp;/** * Support `<details>` tag to wrap <video>. *@default true */details?:boolean;/** * Support `<track>` tag to wrap <video>. *@default true */track?:boolean;};
rehype-attrNew syntax to add attributes to Markdown.rehype-rewriteRewrite element with rehype.rehype-ignoreIgnore content display via HTML comments, Shown in GitHub readme, excluded in HTML.remark-github-blockquote-alertRemark plugin to add support forGitHub Alert
MIT ©Kenny Wong
About
Add improved video syntax: links to `.mp4` and `.mov` turn into videos.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.