使用YouTubes JS API和Reactjs渲染iFrame视频

Render iFrame video using YouTubes JS API with Reactjs

本文关键字：渲染 iFrame 视频 Reactjs YouTubes JS API 使用      更新时间：2023-09-26

我试着寻找周围的例子，但我所有的是youtube-react npm包，我不想，因为我想这样做，并学习它自己。

我的问题在这里的文档:https://developers.google.com/youtube/iframe_api_reference它告诉我为谷歌提供一个锚标记，根据你传递的内容来附加iFrame。

然而，我在服务器端有react，并使用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标签，但没有发生任何事情，控制台没有任何事情。

是否有任何资源或任何人可以指给我正确的方向，我该如何去处理这个

谢谢!

你可以这样创建一个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
}
相关文章：