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
}

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

1 个答案: