All Projects → chintan9 → Plyr React

chintan9 / Plyr React

Licence: mit
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Plyr React

Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+2066.29%)
Mutual labels:  vimeo, player, media, youtube
React Player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
Stars: ✭ 5,931 (+6564.04%)
Mutual labels:  vimeo, player, media, youtube
Min Vid
Popout video player in Firefox
Stars: ✭ 180 (+102.25%)
Mutual labels:  vimeo, player, youtube
Kaku
🎧 Kaku is a highly integrated music player supports different online platform like YouTube, SoundCloud, Vimeo and more. Available on Mac, Windows and Linux.
Stars: ✭ 1,028 (+1055.06%)
Mutual labels:  vimeo, player, youtube
React Modal Video
Accessible React Modal Video Component
Stars: ✭ 105 (+17.98%)
Mutual labels:  vimeo, youtube, accessibility
Shuffle
Shuffle every song in existence from YouTube
Stars: ✭ 131 (+47.19%)
Mutual labels:  hacktoberfest, player, youtube
Plyr
Plyr Mediaplayer (Video und Audio) im Front- und Backend
Stars: ✭ 30 (-66.29%)
Mutual labels:  vimeo, player, youtube
Modal Video
Stars: ✭ 224 (+151.69%)
Mutual labels:  vimeo, youtube, accessibility
Openwhyd
💎 Like Pinterest, for Music
Stars: ✭ 287 (+222.47%)
Mutual labels:  vimeo, player, youtube
Sonatamediabundle
Symfony SonataMediaBundle
Stars: ✭ 415 (+366.29%)
Mutual labels:  vimeo, media, youtube
Yaydl
yet another youtube down loader (Git mirror)
Stars: ✭ 45 (-49.44%)
Mutual labels:  vimeo, youtube
Youtube Html Js Audio Player
An audio player created with HTML Audio and Javascript 🚀
Stars: ✭ 39 (-56.18%)
Mutual labels:  player, youtube
Youtube Extension
🔴YouTube Extension🧰>80 Features ⭐Please document, code or donate📌Tidy📌Longest-standing(2012)(Users>350000)⋮🎞️🎛️🎧⚙️🎬🔊☕🎨🧩🧪📈⏯️(Player: Repeat Screenshot Rotate; Hide related video distraction. Always expand video Description. Playback speed. Video Quality bandwidth H.264 electricity. Player Size Full Window. Themes Customization. Statistics. Reverse Playlist YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube Youtube enhancer YouTube app YouTube video YouTube YouTube YouTube api v3 YouTube playback YouTube player VP8 VP9 AV1 vidIQ tubebuddy download adblocker adblock ads sponsorblock addon youtube music ⭐ youtube premium css css4 html5 ytdl youtube-dl invidious iridium ParticleCore youtube+ youtube++ youtube-plus maia-yt youtube nonstop youtube control center vlogger vlog h264ify h264 m.youtube.com music.youtube.com studio.youtube youtube mobile youtube studio ⭐ kids Vanced gaming.youtube.com gaming youtubecenter freetube lite-youtube-embed newpipe youtube-dl-gui mps-youtube nuclear pytube awesome youtubers youtube downloader 8k 4k 60fps 30fps youtubeexplode vidgear k-lite tubebuddy adobe apple ios iphone design simplify ffmpeg premiere designer annoyance youtube upload
Stars: ✭ 1,027 (+1053.93%)
Mutual labels:  player, youtube
React Native Ezplayer
EZPlayer component for react-native apps
Stars: ✭ 47 (-47.19%)
Mutual labels:  player, media
Pandoraplayer
🅿️ PandoraPlayer is a lightweight music player for iOS, based on AudioKit and completely written in Swift.
Stars: ✭ 1,037 (+1065.17%)
Mutual labels:  player, media
Unity Videoplayer Helper
Simple helper for the Video Player in Unity
Stars: ✭ 49 (-44.94%)
Mutual labels:  vimeo, youtube
Musicalyoutube
A Youtube floating PIP player for Android.
Stars: ✭ 50 (-43.82%)
Mutual labels:  player, youtube
Richtextview
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links
Stars: ✭ 953 (+970.79%)
Mutual labels:  vimeo, youtube
Audioplayers
A Flutter plugin to play multiple audio files simultaneously (Android/iOS)
Stars: ✭ 1,042 (+1070.79%)
Mutual labels:  hacktoberfest, player
Player.js
Interact with and control an embedded Vimeo Player.
Stars: ✭ 1,093 (+1128.09%)
Mutual labels:  vimeo, player

plyr-react

All Contributors

plyr-react

Installation

This plugin requires minimum Node.js with npm or yarn.

# with npm
npm i plyr-react

# with yarn
yarn add plyr-react

Usage

import Plyr from 'plyr-react'
import 'plyr-react/dist/plyr.css'

export default function App() {
  return (
    <Plyr
      source={
        {
          /* ... */
        }
      }
      options={
        {
          /* ... */
        }
      }
    />
  )
}

Using ref

// Component class
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.player = createRef()
  }

  componentDidMount() {
    // Access the internal plyr instance
    console.log(this.player.current.plyr)
  }

  render() {
    return (
      <>
        <Plyr ref={(player) => (this.player.current = player)} />
      </>
    )
  }
}

// Functional component

const MyComponent = () => {
  const ref = useRef()
  useEffect(() => console.log(ref.current.plyr))
  return (
    <>
      <Plyr ref={ref} />
    </>
  )
}

Example

You can fork this example https://stackblitz.com/edit/react-fpmwns?file=src/App.js Demo https://react-fpmwns.stackblitz.io

Contribute

Gitpod Ready-to-Code npm BCH compliance Size

Support

If you like the project and want to support my work, give star or fork it.

Thanks

  • @iwatakeshi For provide help for convert to typescript.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].