So I was rendering a video in my react website using the below code :
<video src='/assets/video/2.mp4' autoPlay={true} loop={true}/>
Although this was working fine.But when I refresh my chrome browser the video is not playing.
I searched for a solution but was unable to resolve it.
But when I changed my code to :
<video src='/assets/video/2.mp4' autoPlay={true} loop={true} muted={true}/>
My video plays even on browser refresh.
I can't find the reason for this.
I am still a newbie in react and any help would be appreciated.
I think this is not a React issue but more of a web policy in which browsers would prevent videos from autoplaying unmuted.
Google's Explanation
A workaround that I could think of:
User interactions with your website could bypass this autoplay restriction. You could start the video muted but unmute it if the user interacts with the page?
Look for some React video player libraries to help you with that unmuting / muting controls. E.g.:
Video.js
Hope this helps to clarify!
Related
This web App(reactjs) works fine on desktop and tablets.
However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:
Please click to view the gif
I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.
Anyone know why this happened?
Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?
Seems like there is an infinity refresh did you checked useEffect / useMemo / Function Call. The only thing that i can do now, is telling you where you can possibly check in your code, but for a better understanding of your problem, should provide more info about your code or more techical information
Im using react-player with cloudinary to automatically play and loop a video without controls (so it looks like a gif).
Preferences currently set to:
<ReactPlayer
url={elem.media_path}
playing={true}
loop={true}
controls={false}
/>
The video wont play until it has loaded unless controls are on and you start it manually.
Is it possible to automatically start the video without controls?
Depends on browser which you are using but video must be muted if you want to autoplay without users interaction.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
You can read more about it at Google Developers - Autoplay Policy Changes
All Dev, I am working on pull to refresh feature in my react native project. As we all know that react native itself providing a Refresh Control that we can us along with List and ScrollView but not with View 😉that's fine.
I notice that there’s no common gesture for refreshing the page data for both platform if we go with the Refresh Control because of fundamental different
After reading this articlehere:
For iOS, the Pull-to-Refresh embedded in as part of the list.
For Android, the Pull-to-Refresh is not part of the list, but on top
of it.
Now my question is there any way to implement the same gesture for refreshing on iOS platform either native side or react side. For android we have SwipeRefreshLayout but do we have any controller that help to achieve the same gesture in iOS platform?.
Below is the refresh image from android platform:(Gmail App)
Sorry in case of you can't understand the question. feel free to comment will update. Any suggestion and comments are welcome.
Thank you.
I am using vimeo player to play video (auto-play) on my website. It works fine on desktop, but when i am trying to play my video on safari/ipad/mobile-devices it does not work as autoplay video. When i click the play button, it works fine.
http://player.vimeo.com/video/********?autoplay=1
From Vimeo support:
Why can't I loop or autoplay my videos on mobile devices?
These functions are restricted on most mobile platforms and are out of
our control. Sorry!
https://vimeo.com/help/faq/mobile/mobile-videos#why-cant-i-loop-or-autoplay-my-videos-on-mobile-devices
I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);