score:3
Accepted answer
you are not setting the isplaying
to true
when video starts.
here is how you can do it.
<reactplayer
url="https://www.youtube.com/watch?v=5djf0c3dybg"
playing={isplaying}
onstart={() => setisplaying(true)}
onpause={() => setisplaying(false)}
onended={() => setisplaying(false)}
volume={1}
width="50vw"
height="50vh"
/>
you can check it here as well. https://codesandbox.io/s/pause-de-video-forked-9788g?file=/src/player.js
score:1
@saksh's answer won't work if you pause the video and resume again. i got the following from this comment by the maintainer of the react-player library: https://github.com/cookpete/react-player/issues/1152#issuecomment-767666288
<reactplayer
url="https://www.youtube.com/watch?v=5djf0c3dybg"
playing={isplaying}
onplay={() => setisplaying(true)}
onpause={() => setisplaying(false)}
volume={1}
width="50vw"
height="50vh"
/>
see https://codesandbox.io/s/pause-de-video-forked-qb685?file=/src/player.js
Source: stackoverflow.com
Related Query
- Pause video when changing slide in react js?
- Pause Video When Not In Sight in React
- Dynamic Opacity not changing when component rerenders in react native
- React img not immediately changing when src changes. How can I fix this?
- Event listener functions changing when using React hooks
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- Changing route parameters when a different dropdown option is selected in React
- why should you clone react state before changing it or when working on it?
- Getting TypeError: Object(...) is not a function with when changing Routes in React
- Support callback for changing another field value when using React Hook Form validation
- Fade out / in text when changing in React
- Changing styles when scrolling React
- react router dom not working when changing the path
- My react frontend is not changing when I deploy to Google App Engine
- React component props not changing when they should?
- Pause other video if selected video is playing in react
- Play video when hover a card and show a default image when not hovering in react js
- React hook changing the state variable of wrong component when file input
- Changing fetch request url dynamically when state updates in React
- React component is not removed when changing path
- Vertical Stepper should scroll to top when changing steps in Material UI react
- CSS not changing when using React Router to route to another component
- React state changing when pushing nested object
- How to stop redux-form or React from changing htmlFor and id when creating Jest snapshots?
- React router not reloading Component when changing url params
- Video pausing unexpectedly when video `onTimeUpdate` event is called (with React Hooks)
- Video output not changed when changing source in zxing js library
- React Router - Why is the switch not changing html when the path changes?
- Blank Page with React when fetching video from Firebase Storage
- Changing the attribute cx and cy when screen resize in D3.js with React
More Query from same tag
- Cannot get React to act on button click except via addEventListener
- async await fetch api data in react
- Playing audio from a playlist in React
- How to fix 431 Request Header Fields Too Large in React-Redux app
- React App - createProxyMiddleware is not a function
- Blocking a react route
- How to get React to Stop watching the state of a parent object?
- Can't understand some codes in redux-form
- How do I log some string on server and give it back to component as props using Next.js?
- Pagination with API
- Copy Text To Clipboard using ReactJS
- Why does React fail to define 'App' component?
- npm karma phantomJS undefined is not a constructor
- React: change element class depending on screen position
- Undefined data after responseJson is entered into state [] in ReactJS
- chai-redux-mock-store - ReferenceError: createMockStore is not defined
- How to render a map in React?
- React Could not find a declaration file for module 'react-vis'
- ScrollIntoView behavior smooth is broken in react
- React Component running after I change page
- Display a specific user by _id (MongoDB, Node, React) error: Cast to ObjectId failed for value "undefined" at path "_id" for model "user"
- React.js using Parent's function to control Child's state
- Creating Back To Top button with chakra ui
- Dealing with post requests and tokens while testing a React application with Jest
- d3.js Cluster bubbles with over 2600 nodes
- React, onChange and onClick events fires simultaneously
- sliding menu hover effect in react js
- reactStringReplace(), replace multiple strings with different anchor tags in a same paragraph(string) having additional <a>tags
- I have to keep refreshing the page so my data pops up
- validateDOMNesting(...): #text cannot appear as a child of <tr>