如何在 React 中显示来自 vimeo 播放器的视频的 iframe？

Question

我有一个例子，我访问了一个 vimeo 频道的所有视频并且有效，但是当我尝试将所有视频列为 vimeo 播放器的 iframe 时，它只是 returns iframe html 代码。这是我所拥有的：

从 'react' 导入 React，{ 组件}；从 'axios';

导入 axios

    const CLIENT_IDENTIFIER = "**********";
    const CLIENT_SECRET = "***********";


            class Apicall extends Component {

              state = {
                  vimeo: []
              };    

             async getVideosForChannel(access_token) {
            const { data } = await axios.get(
              "https://api.vimeo.com/channels/180097/videos",
               {
                  headers: {
                    Authorization: `Bearer ${access_token}`
                  }
               }
            );

          this.setState({ vimeo: data.data });
      }


         async componentDidMount() {
            if (!CLIENT_IDENTIFIER || !CLIENT_SECRET) {
           return alert("Please provide a CLIENT_IDENTIFIER and CLIENT_SECRET");
            }

         try {
            const { data } = await axios.post(
                 "https://api.vimeo.com/oauth/authorize/client",
              { grant_type: "client_credentials" },
            {
            auth: {
               username: CLIENT_IDENTIFIER,
               password: CLIENT_SECRET
             }
           }
          );

      this.getVideosForChannel(data.access_token);
    } catch (error) {
      if (error.response.status === 429) {
        alert(
          "The Vimeo api has received too many requests, please try again in an hour or so"
        );
      }
    }
  }





render() {
    return (
         <div className="container">
           <h1></h1>
           <ul>
            {this.state.vimeo.map(({ resource_key, embed, pictures}) => (
                <li key={resource_key}>
                    {embed.html}
                </li>
            ))}
           </ul>
         </div>
    );
   }
 }

   export default Apicall;

以下代码导致将其输出到屏幕：

<iframe src="https://player.vimeo.com/video/28028960?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=132884" width="640" height="360" frameborder="0" title="Gastação TV: Link's Death - Dorkly Bits (LEGENDADO)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我在这里做错了什么？

Answer 1

您可能需要调用 dangerouslySetInnerHTML 来停止将 html 视为字符串的反应

<li
  key={resource_key}
  dangerouslySetInnerHTML={{__html: embed.html}}
/>

如何在 React 中显示来自 vimeo 播放器的视频的 iframe？

How do I display iframes of videos from vimeo player in React?

javascript

embed

api

iframe

reactjs