Невозможно воспроизвести отдельное видео на YouTube с реакцией. Я использую данные YouTube Api v3. - PullRequest
Новая
       11

Невозможно воспроизвести отдельное видео на YouTube с реакцией. Я использую данные YouTube Api v3.

0 голосов
/ 24 сентября 2018

Я могу получить видео из API данных YouTube, но я пытаюсь добиться этого, я являюсь компонентом видео, и у меня есть компонент видео.Компонент "Видео" - это несколько видео, которые я сопоставил с API данных YouTube, и я хочу, чтобы пользователи нажимали на конкретное видео, которое оно должно воспроизводить в компоненте "Видео".Ниже приведен мой код. 

import React from 'react';

const url = 'https://www.googleapis.com/youtube/v3/playlistItems';
const key = 'xxxxx';
const playlistId = 'xxxxx';

const finalUrl = `${url}?part=snippet&playlistId=${playlistId}&key=${key}`;

class Youtube extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      video: null,
      videos: null,
    }
    this.playVideo = this.playVideo.bind(this);
  }
  componentDidMount() {
    const getData = () => {
      return fetch(finalUrl)
        .then((data) => data.json())
        .then((dataJson) => {
          console.log(dataJson);
          const videos = dataJson.items.map(item => 
            <div onClick={this.playVideo} key={item.etag} className="col l4 s12 m6 videos">
              <img src={item.snippet.thumbnails.default.url} 
              alt="videos" />
              <h4>{item.snippet.title}</h4>
            </div>
          )
          this.setState(() => {
            return {
              video: <iframe title="main-video" width="560" height="315" frameBorder="0" src={`https://www.youtube.com/embed/${dataJson.items[0].snippet.resourceId.videoId}`} allowFullScreen></iframe>,
              videos: videos
            }
          })  
      })
        .catch((error) => {
          console.log(error);
        });
    }
      getData();
  }
  playVideo() {
    this.setState(() => {
      return {
        video: <iframe title="main-video" width="560" height="315" frameBorder="0" src={ url } allowFullScreen></iframe>,
      }
    })
  }
  render() {
    return (
      <div>
        <div className="container center-align">
          <div className="row">
            {this.state.video}
          </div>
          <div className="row">
            {this.state.videos}
          </div>
        </div>
      </div>
    )
  }
}

export default Youtube;

Я знаю, что написанный мной код - не лучший способ написания реагирующего компонента.Я пытаюсь улучшить это.Любая помощь будет оценена.

...