53

react-plyr - A React video component based on the Html5 video player Plyr

 5 years ago
source link: https://www.tuicool.com/articles/hit/qiENbib
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ReactPlyr Video Component

A React video component based on Plyr.

iYF7naz.png!web

Installation

Add react-plyr into your package.json dependencies: 

npm install react-plyr --save

CSS

Include the plyr.css stylsheet into your <head> 

<link rel="stylesheet" href="path/to/plyr.css">

If you want to use our CDN (provided by Fastly ) for the default CSS, you can use the following: 

<link rel="stylesheet" href="https://cdn.plyr.io/3.3.21/plyr.css">

Usage

Simple Youtube or Vimeo video

import Plyr from 'react-plyr';

// add the component in the render function
render() {
  return (
    <Plyr
      type="youtube" // or "vimeo"
      videoId="CDFN1VatiJA"
    />
  )
}

Note: The videoId can either be the video ID or URL for the media.

Props

[WIP]

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow . Create a branch, add commits, and open a pull request .


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK