使用带有Reactjs的YouTubes JS API渲染iFrame视频

Question

我试过四处寻找例子,但我所拥有的是youtube-react npm我不想要的包,因为我想自己学习并自己学习.

我的问题在于此处的文档:https: //developers.google.com/youtube/iframe_api_reference 它告诉我为Google提供一个锚标记,以根据您传递的内容附加iFrame.

但是,我已经在服务器端做出反应并使用web-pack将其编译到客户端我的react组件到目前为止看起来像:

import React from 'react';
import { Link } from 'react-router'
import classnames from 'classnames'

const videoId = 'XxVg_s8xAms';

export default React.createClass({
  getInitialState: function() {
    return {
      YTid: videoId,
    }
  },
  render() {
    return (
      <section className="youtubeComponent-wrapper">
        <div id="youtubePlayerAnchor"></div>
      </section>
    )
  }
})

我已经尝试将开发人员文档中的script代码添加到客户端的标记中,但在控制台中什么都没发生.

是否有任何资源或任何人都可以指出我如何处理这个问题的正确方向.

谢谢!

Answer 1

您可以创建一个这样的React组件:

import { Component, PropTypes } from 'react'

let loadYT

export default class YouTube extends Component {
  componentDidMount () {
    if (!loadYT) {
      loadYT = new Promise((resolve) => {
        const tag = document.createElement('script')
        tag.src = 'https://www.youtube.com/iframe_api'
        const firstScriptTag = document.getElementsByTagName('script')[0]
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
        window.onYouTubeIframeAPIReady = () => resolve(window.YT)
      })
    }
    loadYT.then((YT) => {
      this.player = new YT.Player(this.youtubePlayerAnchor, {
        height: this.props.height || 390,
        width: this.props.width || 640,
        videoId: this.props.YTid,
        events: {
          onStateChange: this.onPlayerStateChange
        }
      })
    })
  }

  onPlayerStateChange = (e) => {
    if (typeof this.props.onStateChange === 'function') {
      this.props.onStateChange(e)
    }
  }

  render () {
    return (
      <section className='youtubeComponent-wrapper'>
        <div ref={(r) => { this.youtubePlayerAnchor = r }}></div>
      </section>
    )
  }
}

YouTube.propTypes = {
  YTid: PropTypes.string.required,
  width: PropTypes.number,
  height: PropTypes.number,
  onStateChange: PropTypes.func
}