Как отобразить iframes видео с vimeo плеера в React? - PullRequest
Новая
       8

Как отобразить iframes видео с vimeo плеера в React?

0 голосов
/ 29 августа 2018

У меня есть пример, когда я получаю доступ ко всем видео на канале vimeo, и это работает, но когда я пытаюсь перечислить все видео в качестве фреймов плеера vimeo, он просто возвращает HTML-код iframe. Вот что у меня есть:

import React, {Component} из'act '; импорт 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&ccedil;&atilde;o TV: Link&#039;s Death - Dorkly Bits (LEGENDADO)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 29 августа 2018

Вам может потребоваться вызвать dangerouslySetInnerHTML, чтобы прекратить реагировать на трактовку HTML как строки 

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