如何在 React 中单击按钮后渲染 YouTube 视频？-解网

问：

我是 React 的新手，正在尝试构建一个视频播放器页面。目前，我脑海中有一个超级基本的页面——我想要一个按钮，当点击它时，它会呈现一个 YouTube 视频。

我遵循了一个使用 npm react-player 包的资源，以便我可以嵌入 Youtube 播放器，如下所示：

function YouTubePlayer () {
  return (
    <div>
      <ReactPlayer
        url="https://www.youtube.com/watch?v=ug50zmP9I7s"
      />
    </div>
  )
}

export default YouTubePlayer

但是，我希望它仅在单击按钮时加载，而不是在加载后立即显示在页面上。我创建了一个按钮和一个事件处理程序，如下所示：

import { Component } from 'react';
import ReactPlayer from 'react-player';

class YouTubePlayer extends Component {
    
    constructor(props) {
        super(props);
    }

    handleYouTubeClick = () => {
        return (
            <div>
                <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
            </div>
        );
    }

    render() {
        return ( 
        <div>
            <p>Video Player</p>
            <button onClick={this.handleYouTubeClick}>YouTube</button>
        </div>
        );
    }

export default YouTubePlayer

但没有视频被渲染。我必须对状态做些什么吗？我不知道我该怎么做。同样，我对 React 非常陌生，所以如果我完全错误地处理这个问题，请告诉我。谢谢。

reactjs video youtube-api 渲染视频嵌入

import { Component } from "react";
import ReactPlayer from "react-player";

class YouTubePlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleYouTubeClick = () => {
    this.setState({
      isClicked: true
    });
  };

  render() {
    return (
      <div>
        <p>Video Player</p>
        <button onClick={this.handleYouTubeClick}>Youtube</button>
        {this.state.isClicked && (
          <div>
            <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw" />
          </div>
        )}
      </div>
    );
  }
}
export default YouTubePlayer;

这是解决您的问题的代码。

class YouTubePlayer extends Component {

    state = {
        showYoutube: false,
    }

    ShowPlayer = () => {
        if(this.state.showYoutube) {
                return (
                    <div>
                        <ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
                    </div>
                );
        }
    }

    handleYouTubeClick = () => {
        this.setState({
            showYoutube: true,
        })
    }

    render() {
        return ( 
            <div>
                <p>Video Player</p>
                <this.ShowPlayer />
                <button onClick={this.handleYouTubeClick}>Youtube</button>
            </div>
        );
    }
    
}

我希望这对你有所帮助。谢谢

上一个：在 React 中加载两列中的视频数组

下一个：Instagram 嵌入框未加载嵌入代码...有人知道解决方法吗？

如何在 React 中单击按钮后渲染 YouTube 视频？

How to render a YouTube video upon button click in React?

评论

评论