Write a markdown remark plugin to embed video in image

61 Views Asked by At

The markdown ![](test.mp4) doesn't work; the only way you can embed a video is with something like

<video controls autoplay>
  <source src="xxx.mp4">
</video>

I would like to write plugin that pre-transforms any url with a video extension to be a video embed rather than an image.

Furthermore, I need this transformation to be correctly represented in the mdast. I have written a plugin that "works" to get me the transformation I am looking for, but only manipulates the hast instead of the mdast. You can see what I wrote below:

const imageExtensionsRegex = /\.(mp4|webm|ogv|mov|mkv)/g
  return {
    name: "ParagraphToVideo",
    markdownPlugins() {
      return [
        () => {
          return (tree) => {
            visit(tree, "html", (node) => {
              node.value = node.value.replace(
                /<img src="([^"]+)"\s?\/?>/g,
                (match: string, src: string) => {
                  if (src.match(imageExtensionsRegex)) {
                    return `<video controls autoplay><source src="${src}"></video>`
                  } else {
                    return match
                  }
                },
              )
            })
          }
        },
      ]
    },
  }
}

Would there be something from unified that can help me take a video extension and transform it into something like

{
  type: 'image',
  url: 'test.mp4'
}
0

There are 0 best solutions below