如何在 React js 中加载 API 数据视频 url

Question

我已经安装了 dompurify react js 库并加载了来自 API 的所有内容，但是 API youtube URL 视频加载失败但可以在 [=24] 中看到=].

API:

{
    "id": 5,
    "name": "shahiraja",
    "title": "text below as a natural lead-in to additional content. This content is a little bit l text below as a natural lead-in to ad",
    "image": "/media/resources/Screenshot_from_2021-09-14_19-13-25.png",
    "created_at": "2022-01-03T08:07:44.451476Z",
    "body": "<p><iframe frameborder=\"0\" src=\"//www.youtube.com/embed/LNkdmyHp5Co\" width=\"640\" height=\"360\" class=\"note-video-clip\"></iframe><a href=\"https://www.youtube.com/watch?v=LNkdmyHp5Co\"></a><br></p>",
    "category": 1
}

代码：

<div
    class="col-md-10"
    dangerouslySetInnerHTML={{ __html: sanitize(body.body) }}
></div>

Answer 1

看起来 sanitize 对于您开箱即用的需求有点过于固执己见，iframe 已被删除。您可以通过配置并允许 iframe 标记。

<div
  className="col-md-10"
  dangerouslySetInnerHTML={{
    __html: sanitize(body.body, { ADD_TAGS: ["iframe"] })
  }}
/>

Answer 2

如果您从 API 获取数据作为 HTML 代码，那么最好使用

dangerouslySetInnerHTML

否则，如果您获得 URL 文件，则只需使用视频标签即可。

<video
    autoPlay
    playsInline
    muted
    src={src}
    onLoadedData={onLoadedData}
    style={{ opacity: isVideoLoaded ? 1 : 0 }}
  />

如何在 React js 中加载 API 数据视频 url

How to load API data video url in react js

javascript

reactjs

dompurify