使用 html-react-parser 解析 HTML5 <video> 元素

问：

我有一些从 CMS 返回的 HTML 内容，我希望在 NextJS V13 应用程序中显示这些内容。我正在使用该包而不是解析 HTML 内容，因为我还希望替换一些嵌入的标签，例如 ，并分别使用相应的 React 组件、Cloudinary 和自定义 React 组件。html-react-parserdangerouslySetHtml<a><img><video><Link><CldImage><VideoPlayer>

和元素替换工作正常，但是我无法弄清楚如何从中提取“src”属性以将其传递给组件。<a><img><video>domNode<VideoPlayer>

例如，我的代码类似于以下内容：

import parse, { Element, HTMLReactParserOptions } from "html-react-parser"
import VideoPlayer from "@/components/video-player"

export default function ArticleContent({ content }: { content: string }) {
  const parserOptions: HTMLReactParserOptions = {
    replace: (domNode) => {
      // Replace embedded <video> tags with <VideoPlayer>
      if (domNode instanceof Element && domNode.name === "video") {
         return <VideoPlayer src={domNode.<???? WHAT GOES HERE ???>} />
      }
    }
  } 

  return (
    <div>
      {parse(content, parserOptions)}
    </div>
  )
}

在其中找到“src”属性的路径一直具有挑战性。有人有什么建议吗？<video>domNode