React-markdown: [feature request] Audio / video html tag rendering with native markdown

[vadimkantorov]

E.g. even ![](asd.wav) / ![](asd.mp3) -> <audio src="asd.wav" /> would be super-useful.

[francisrod01]

It doesn't belong to the "native" markdown.
I'm going to work on something related to it this month (but not on video tag). :+1:

[francisrod01]

Well, as I search about it, Markdown has a native way to show a thumb to your video link:

[![The Waffle Ninja](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg "This is my Youtube video")](https://www.youtube.com/watch?v=aeiou)

It will generate the preview:

So, no need to do anything in the code!

You can read more here:

• Is it possible to embed Youtube/Vimeo videos in Markdown

[vadimkantorov]

I'm actually more concerned about embedding HTML5-audio player that can work on the page without having to navigate away to youtube.

[SalahAdDin]

@francisrod01 It is good for common providers, but what if we want to render the video inside of content? For instance, using _React Player_, we can get, as @vadimkantorov, video from the _markdown_ and rendering it with custom components.
Is there any way to get a video from its file extension as Gitlab does?

Gastby already has a plugin for it.

[francisrod01]

I see. You're right!!
I look forward to see that here but I'll think in something related to it also.
Until now here some references to it:

• Regex to get string between curly braces:
  https://stackoverflow.com/a/6995051/3332734
  https://stackoverflow.com/a/44257681/3332734

[SalahAdDin]

How is this going on guys?

[ChristianMurphy]

It doesn't belong to the "native" markdown.

Correct, this is not native markdown,
however it can be supported through a remark plugin.
You can find more information on creating plugins see https://unifiedjs.com/learn/

[SalahAdDin]

@ChristianMurphy retext or remark plugin?

[ChristianMurphy]

a remark plugin.

---

retext is another unified project, specifically for NLP applications.
Both remark and retext (as well as rehype and redot) build off unist, but are designed for different languages/goals.

[SalahAdDin]

Is anyone working on this?

[wooorm]

working on what?

[SalahAdDin]

@wooorm a plugin for videos.

[wooorm]

You can search online, such as here on GitHub, or on npm, for remark + video and it seems there are some plugins yeah. But I haven’t tried them.

I think it’s a bad idea to add a custom syntax for things to markdown though. It means it won’t render as such here on GitHub, or on any other platform. My suggestions is: use an image, with a link.