https://github.com/ogrodev/interactive-react-player

https://github.com/ogrodev/interactive-react-player

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ogrodev/interactive-react-player
• Owner: ogrodev
• Created: 2021-03-09T15:55:06.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-03-17T22:06:15.000Z (over 5 years ago)
• Last Synced: 2023-07-21T03:28:48.150Z (almost 3 years ago)
• Language: JavaScript
• Homepage: react-live-video-player.vercel.app
• Size: 2.27 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Player with interactive modals and customs controls

[![DemoLink](https://img.shields.io/badge/DEMO-online-brightgreen)](https://react-live-video-player.vercel.app/)




This project is a use case! I've implemented custom controls and there is a feature for adding questions when the player reaches given timeframe.




I've used 

* [ReactJS](https://reactjs.org) 

* [ChakraUI](https://chakra-ui.com/)

* [React Player](https://github.com/cookpete/react-player)




If you want to test it locally clone the repository, enter it and run:

`npm start`




Then access [localhost](http://localhost:3000) as you would in create-react-app developments.




Most of the project is in English, but some parts are in pt-br.




## How to use




The usage is very simple, just follow the steps below.

![Steps](https://sweetsoul.sirv.com/Images/Github/CustomReactPlayer/demo.png)

1. Video URL (Paste any video URL accepted in [React Player](https://github.com/cookpete/react-player)

2. Checkbox to set the LiveMode (It's a Live?)

3. Use logo? (If unchecked removes the logo from the top right corner)

4. If Use logo is true, the shown logo will be the link in this input or if empty, the chakra UI logo.

5. Primary color to match the volume and time sliders, as well the `box-shadow` color when liveMode is ON.

6. Secondary color to use in text inside LiveMode Badge

7. Ask a question at certain given time. Input 1= Question to be asked >> Input 2= Time in seconds to be displayed.

8. Add new question inputs




P.S.: The question in sending the answer to console for now.