score:145
quick and dirty awnser: add a key
prop to <clip>
or <video>
, e.g.:
function clip({ url }) {
return (
<video key={url}>
<source src={url} />
</video>
);
}
recommended awnser: trigger a load
event for the video element whenever there's a new url, e.g.:
function clip({ url }) {
const videoref = useref();
useeffect(() => {
videoref.current?.load();
}, [url]);
return (
<video ref={videoref}>
<source src={url} />
</video>
);
}
explanation: the video initially doesn't change because in essence you're only modifying the <source>
element and react understands that <video>
should remain unchanged, so it does not update it on the dom and doesn't trigger a new load
event for that source. a new load
event should be triggered for <video>
.
the dirty answer works because when you change the key
of a react element, react understands that's a whole new element. it then creates a new element in the dom which naturally will have its own load event triggered on mount.
score:0
bind the url in the src property of video tag and not source tag
<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videosrc" type="video/mp4">
score:0
add a parent div to second video
my code:
{ismobile ? (
<video
autoplay={true}
loop
classname="moviles"
muted
playsinline
poster="/totto/kids.png"
>
<source src="/totto/losmoviles.webm"></source>
<source src="/totto/losmoviles.mp4"></source>
</video>
) : (
<div>
<video
autoplay={true}
loop
classname="moviles2"
muted
playsinline
poster="/totto/portada.jpg"
>
<source src="/totto/moviles.webm"></source>
<source src="/totto/moviles.mp4"></source>
</video>
</div>
)}
score:0
you can use the key attribute :
<video key={videourl} autoplay width="100%">
<source src={videourl} type="video/mp4"></source>
</video>
if the video's key attribute change, the video component will be re-mounted
score:21
changing the src of <source />
doesn't seem to switch the video for some reason. this isn't a react issue i don't think. probably just how <source />
works. maybe you have to call .load()
on the element again. but it's just easier to set it directly on the element itself.
see the comment to the top answer: can i use javascript to dynamically change a video's source?
you can set src
directly on element instead:
function clip(props) {
return (
<video width="320" height="240" src={props.url} controls autoplay>
</video>
)
}
Source: stackoverflow.com
Related Query
- Updating source URL on HTML5 video with React
- HTML5 video not working on iphone with react jsx
- React Route with URL Param Not Updating View
- Updating an object with setState in React
- Updating state with props on React child component
- React img tag issue with url and class
- Updating a React Input text field with the value on onBlur event
- How to make react router work with static assets, html5 mode, history API and nested routes?
- React Native Image Not Working with specific URL
- React hooks useState not updating with onChange
- updating objects with setState in React
- Why is my react component not updating with state updates?
- Updating Parent Component State from Child Component with UseState React Hook
- View the source code of a website built with React
- Clickable url value in ag-grid with react
- react props not updating with redux store
- React router: component not updating on url search param change
- Changing components based on url with react router
- Using different API url for development and production with React and axios
- Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend
- react js html5 video not working
- React Native generate thumbnail for video url
- React router with browserHistory goes to server on every URL change
- ReactJS- Use slug instead of Id in the URL with React router
- React Child with useEffect() not updating on Parent State Change
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- Why React Router NavLink prop exact (v5) vs. end (v6) lead to different result with trailing slash in url
- React router <NavLink> with active style doesn't work as I required with root URL
- React not updating state with setState with Array of object
- ReactJS: How can I play an html5 video with an onClick event correctly with react?
More Query from same tag
- Simulate click event on react element
- Cannot read property of 'onOverviewChange' of undefined
- Property 'defaultProps' does not exist on type
- How to update React.js version installed in Laravel to the latest version?
- Semantic UI React href of label in corner of image with its own href causes errors
- React & Reselect selector claims state is the same after update
- Input not changing state REACTJS
- React js and Axios
- Functional Component in React is not updating on props change
- Call component function from a JS File
- Multiple Select not working, only giving last clicked value
- How to place an closing button on a tab, using Material UI
- Attempting to add multiple items to SP list using sp/pnp but getting error on ```createBatch()```
- How to use material-ui breakpoint rule in external styles?
- React. Securing communication between frontend and backend located on the same server
- React Get User Info.(Input Values) On a Button Click
- How to use dark theme for section of the screen
- Why do I have to click twice for an event in react js
- useState Array of Objects
- Could not find router reducer in state tree, it must be mounted under "router"
- How to call child method inside parent component? React-redux
- How to resolve unique keys required error when using <MemoryRouter /> in a test
- How to create a conditional handler/button
- React Bootstrap OverlayTrigger and Tooltip error
- Error: Cannot read property 'UIAppFonts' of null
- React Too Many re-renders error when trying to change the state of a variable
- writing clean code: find an property in object-array with null-check
- Change the color of an UIkit icon in react
- Scope Issue With `this` Inside React Component Lifecycle Hook
- on clicking "/" render a menu and focus on the menu options