react-youtube

React.js powered YouTube player component

MIT 103 个版本
react youtube player react-component
主页
仓库
提交 Issue
安装
npm install react-youtube
yarn add react-youtube
pnpm add react-youtube
bun add react-youtube
README

Release Tests Example

react-youtube

Simple React component acting as a thin layer over the YouTube IFrame Player API

Features

Installation

NPM

npm install react-youtube

Yarn

yarn add react-youtube

PNPM

pnpm add react-youtube

Usage

<YouTube
  videoId={string}                  // defaults -> ''
  id={string}                       // defaults -> ''
  className={string}                // defaults -> ''
  iframeClassName={string}          // defaults -> ''
  style={object}                    // defaults -> {}
  title={string}                    // defaults -> ''
  loading={string}                  // defaults -> undefined
  opts={obj}                        // defaults -> {}
  onReady={func}                    // defaults -> noop
  onPlay={func}                     // defaults -> noop
  onPause={func}                    // defaults -> noop
  onEnd={func}                      // defaults -> noop
  onError={func}                    // defaults -> noop
  onStateChange={func}              // defaults -> noop
  onPlaybackRateChange={func}       // defaults -> noop
  onPlaybackQualityChange={func}    // defaults -> noop
/>

For convenience it is also possible to access the PlayerState constants through react-youtube: YouTube.PlayerState contains the values that are used by the YouTube IFrame Player API.

Example

// js
import React from 'react';
import YouTube from 'react-youtube';

class Example extends React.Component {
  render() {
    const opts = {
      height: '390',
      width: '640',
      playerVars: {
        // https://developers.google.com/youtube/player_parameters
        autoplay: 1,
      },
    };

    return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />;
  }

  _onReady(event) {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }
}

// ts
import React from 'react';
import YouTube, { YouTubeProps } from 'react-youtube';

function Example() {
  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
}

Controlling the player

You can access & control the player in a way similar to the official api:

The API component will pass an event object as the sole argument to each of those functions the event handler props. The event object has the following properties:

  • The event's target identifies the video player that corresponds to the event.
  • The event's data specifies a value relevant to the event. Note that the onReady event does not specify a data property.

License

MIT

版本列表
10.1.0 2022-11-22
10.1.0-canary.1 2022-11-22
10.0.0 2022-09-12
10.0.0-canary.2 2022-11-22
10.0.0-canary.1 2022-09-12
9.0.3 2022-07-04
9.0.3-canary.1 2022-06-19
9.0.2 2022-05-25
9.0.2-canary.2 2022-06-19
9.0.2-canary.1 2022-05-25
9.0.1 2022-04-28
9.0.1-canary.2 2022-05-25
9.0.1-canary.1 2022-04-28
9.0.0 2022-04-28
9.0.0-canary.1 2022-04-28
8.3.0 2022-04-25
8.3.0-canary.1 2022-04-25
8.2.1 2022-04-14
8.2.1-canary.1 2022-04-14
8.2.0 2022-04-13
8.2.0-canary.2 2022-04-14
8.2.0-canary.1 2022-04-13
8.1.0 2022-04-13
8.1.0-canary.2 2022-04-11
8.1.0-canary.1 2022-04-11
8.0.0 2022-04-10
8.0.0-canary.2 2022-04-11
8.0.0-canary.1 2022-04-10
7.14.0 2022-01-04
7.14.0-canary.3 2022-04-10
7.14.0-canary.2 2022-01-04
7.14.0-canary.1 2021-08-19
7.13.2-canary.1 2021-03-13
7.13.1 2021-01-24
7.13.1-canary.4 2021-03-13
7.13.1-canary.3 2021-03-13
7.13.1-canary.2 2021-01-24
7.13.1-canary.1 2021-01-24
7.13.0 2020-10-17
7.13.0-canary.2 2020-10-17
7.13.0-canary.1 2020-10-17
7.12.1-canary.1 2020-10-08
7.12.0 2020-08-22
7.12.0-canary.3 2020-10-08
7.12.0-canary.2 2020-08-22
7.12.0-canary.1 2020-08-22
7.11.3 2020-07-22
7.11.3-canary.1 2020-07-21
7.11.2 2020-04-19
7.11.2-canary.1 2020-04-16
7.11.1 2020-04-05
7.11.1-canary.2 2020-04-16
7.11.1-canary.1 2020-04-04
7.11.0 2020-04-04
7.11.0-canary.2 2020-04-04
7.11.0-canary.1 2020-04-04
7.10.0 2020-04-02
7.10.0-canary.3 2020-04-04
7.10.0-canary.2 2020-04-03
7.10.0-canary.1 2020-04-02
7.9.0 2019-01-17
7.8.0 2018-10-08
7.7.0 2018-09-27
7.6.0 2018-04-16
7.5.0 2017-10-04
7.4.0 2017-04-12
7.3.0 2016-12-09
7.2.0 2016-09-25
7.1.1 2016-09-07
7.1.0 2016-09-07
7.0.1 2016-06-18
7.0.0 2016-06-10
6.1.0 2016-04-08
6.0.0 2016-04-08
5.1.0 2016-02-20
5.0.1 2016-02-20
5.0.0 2015-12-12
4.1.2 2015-09-15
4.1.1 2015-09-11
4.1.0 2015-09-03
4.0.0 2015-06-27
3.3.0 2015-06-19
3.2.0 2015-05-21
3.1.0 2015-04-08
3.0.1 2015-03-30
3.0.0 2015-03-22
2.2.2 2015-02-17
2.2.1 2014-12-16
2.2.0 2014-12-15
2.1.3 2014-12-03
2.1.2 2014-12-01
2.1.1 2014-11-30
2.1.0 2014-11-30
2.0.0 2014-11-30
1.3.0 2014-11-29
1.2.0 2014-11-26
1.1.0 2014-11-26
1.0.3 2014-11-06
1.0.2 2014-11-05
1.0.1 2014-11-05
1.0.0 2014-11-05
0.0.2 2014-07-20
0.0.1 2014-07-20