react-player is a React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. More information can be found at https://github.com/CookPete/react-player.
Questions tagged [react-player]
213 questions
1
vote
1 answer
ReactJS Video player (react-player) - How to check if the video was (fully) played?
I'm using ReactJS and I'm trying to display a video where the user is only allowed to continue after watching the entire video. I'm currently using a dependency called React-player, it has the option to check when it has ended, but then the user can…
SJ19
- 1,933
- 6
- 35
- 68
1
vote
0 answers
Problems synchronizing videos with ReactJS / Typescript / Socket.io
I'm developing an app as a workout with the function of synchronizing selected youtube videos, by users, for this, I'm using ReactJs, Socket.io, and React-player, however when I get to the synchronization part I have a question.
I intend to do the…
uKn_70
- 29
- 4
1
vote
0 answers
React Native Invariant Violation "Main" has not been registered with react-native-track-player
I am using React-native to build an app that will use audio. Everything was set up correctly and installed with the latest updates. However, whenever I add
import TrackPlayer from 'react-native-track-player'
it gives me an error that says
Invariant…
Nathan Belete
- 111
- 4
- 11
1
vote
1 answer
Create ref to external class component inside functional component in React
I would like to use react player library in my app
import React, { useEffect, useRef } from "react";
import ReactPlayer from "react-player";
import { useSelector } from "../../../redux/useSelector";
const VIDEO_URL =
…
hronikata
- 107
- 10
1
vote
0 answers
seekTo() in ReactPlayer not working for YouTube links
I was creating a music player that will use the youtube API. Now I have created a PLayer named it as MainPlayer.JS. The progress bar is working fine with the proper time but I am unable to add the feature of seeking the progress bar to forward the…
Priyom saha
- 630
- 1
- 9
- 28
1
vote
1 answer
Embed Vimeo Player (or any iframe video player) full width and height
I basically want to have an embedded Vimeo video take up the full width and height of a given page (or it's parent div). The embedded Vimeo is an iframe and I am using react-player plugin to embed the video .
I've seen these examples of responsive…
Dave Lee
- 205
- 5
- 14
1
vote
0 answers
ReactPlayer not auto play in IOS platform
Video just can auto play with pc or android but with IOS, it do not play
image for my code
Hùng Đồng
- 11
- 3
1
vote
2 answers
Passing function in React-Native audio player
I am trying to play sounds dynamically based on a function called meditationList. The return of the function gives me the right path which it works in the player.
However, if I call the function on the URL is not working giving me the following…
Obsesie
- 171
- 2
- 14
1
vote
3 answers
Typescript typing a reference for third party custom components (react-player)
Description
I'm struggling to add the type annotation of a useRef attached on this player component: react-player to get access to the seekTo instance method as per the documentation demo source code. I can't seem to get the type to work - I'm kinda…
Kieran Osgood
- 918
- 6
- 17
1
vote
0 answers
React Native Audio Player
I am trying to implement for my app an audio player in react native. The purpose of this player is to play some audio tapes which are fetched from a JSON file. For the moment I succeed doing the UI for it but with no functionality.
Doing some…
Obsesie
- 171
- 2
- 14
1
vote
0 answers
React-player shrinks Vimeo videos
I am using React player version 1.15.3 to play videos in an React web app. I am having an issue with displaying videos from Vimeo, react player seems to shrink them to mini size. I have tried the few things I can think of as well as the responsive…
Jerehme Gayle
- 31
- 5
1
vote
1 answer
How to display a button on the video after video ends with react-player
In my React app, I want a button to navigate to the next lesson to be appeared on the video, right after the current video is finished playing. I'm using react-player to display videos. I want to know how can I accomplish this is react-player. Any…
Pavindu
- 2,684
- 6
- 44
- 77
1
vote
2 answers
In react-player, how can I disable the FullScreen button?
This is my current code for rendering the react-player videos
Nirmal Roy
- 95
- 1
- 2
- 7
1
vote
2 answers
Prevent to click on you tube video link in react player
I am using ReactPlayer https://www.npmjs.com/package/react-player in my react project and it is working but issue is when I put any youtube video url then all youtube video series are displaying bottome side of player and if whenever I click on…
K.S
- 443
- 10
- 29
1
vote
1 answer
How to display array element bu opening modal?
I'm starting with React and i have an issue.
I'm using Youtube API to catch playlist videos. With a .map method, i display all the videos thumbnails and title in cards. When i click on a card, i want to start the video (within Reactplayer) by…
Matthieu PETIT
- 21
- 3