-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Captions not working after loading new video when page already generated #1623
Comments
For anyone dealing with this issue one fix is to unmount the component and remount it after a set time, it's an ugly fix but it works for now, example: const Video = ({ url }) => {
const [load, setLoad] = useState(false)
useEffect(() => {
setTimeout(() => {
setLoad(true)
}, 500)
return () => {
setLoad(false)
}
}, [url])
if (!load) {
return <span>loading...</span>
}
return (
// player here
)
}
export default Video |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Current Behavior
I am generating a web page with the ability to watch different videos on the given page. I am only loading one ReactPlayer object and using useState to shift out which video (Vimeo) url I am pointing to. When a user clicks a button the page stays the same but loads a new video url into the ReactPlayer component. The new video loads correctly and everything looks and works as expected except for the subtitles.
I am loading the subtitles to automatically turn on using the following prop:
config={{
file: {
tracks: [
{
src: url,
kind: 'subtitles',
srcLang: 'en',
default: true,
label: 'English',
},
],
},
}}
This configuration successfully loads and turns on subtitles for the first video that loads when the page opens, however, when the new video is loaded subtitles no longer work. This holds true for just using Vimeo controls option as well. I cannot turn on captions on for the second video loaded into the screen, unless that video is loaded first.
I have added a key to the ReactPlayer component in an attempt to force a reload but that doesn't work either. Is there a way to force update the react play or any other option that might work?
Expected Behavior
Should be able to change the url being passed to the React Player and subtitle options should still load and work as expected.
Steps to Reproduce
Generate a new array of video urls
const urlsArr = [
"myurl.com/",
"myurl.com/",
"myurl.com/",
"myurl.com/"
]
Generate a react player and display it on the web page passing the url from urlsArr
const myVideoPlayerPage = () => {
Add a button that loads the new url when clicked
<Button onClick={() => setVideoIdx(videoIdx+1)} >Next Video
The code above successfully loads the video with working subtitles for any video that is loaded first. However, the second video loaded next after the button is clicked won't work with subtitles. Just the video and audio work.
Environment
The text was updated successfully, but these errors were encountered: