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

【问题标题】：Render iFrame video using YouTubes JS API with Reactjs使用带有 Reactjs 的 YouTubes JS API 渲染 iFrame 视频
【发布时间】：2017-01-23 21:02:21
【问题描述】：

我已经尝试四处寻找示例，但我只有 youtube-react npm 包，因为我想自己做并学习它，所以我不想要这些包。

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

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

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 标记中，但在控制台中什么也没有发生什么都没有。

是否有任何资源或任何人可以为我指明正确的方向，让我知道如何处理这个问题。

谢谢！

【问题讨论】：

你是如何加载 youtube iframe api 的？
@Davidlrnt 我一直无法加载 youtube iframe api。由于文档说我需要将脚本标签写入 DOM 并向其发送 API 响应，但当我尝试时 React 会抱怨。
您可以在 index.html 上添加脚本标签，您的 react 应用程序在其中渲染而不涉及 react，它会全局加载库，因此 react 稍后将能够访问这些方法。唯一的问题是它异步加载库，因此根据应用程序的设置方式，iframe api 在 react 尝试访问它时可能尚未加载，另一种选择是使用 npm 包 youtube 加载库-玩家，npmjs.com/package/youtube-player

标签： javascript node.js reactjs iframe youtube

【解决方案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
}

【讨论】：

干杯！将此用作 Vue 组件的基础；）