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
Related
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
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!
I have built the react carousel component using react-slick. It includes youtube video player section. For this video player, I used tag.
Everything works well but swiping event doesn't work on video part. When I swipe on this, it doesn't slide next but just plays the video.
Implemented videogular html player.All works well in desktop but in case of Apple IPAD the volumne control is not visible.And one major issue is on clicking full-screen of videogular player,video does not plays in videogular instead it opens up in the apple's native player(i.e., quick player).
How can I prevent video from playing in native player in IPAD and display volumne control for vidoegular.?
Is there any fixes available.
Please help!
Volume button is not shown on mobile devices because you can't change with the native API the volume, user must use hardware buttons to change the volume.
Additionally, on mobile devices you can't set HTML elements to fullscreen, only the video element. If you need Videogular controls in fullscreen mode you can try to use "vg-native-fullscreen":
<videogular vg-native-fullscreen="false">
<!-- content -->
</videogular>
However, this is an emulated fullscreen and user will see the browser navigation bar.
There was a similar question posted few days ago but it was deleted... I use fancy box to popup a youtube video when the user clicks on thumbnail.
But in mobile version i wish to trigger mobile's video player instead of playing video on popup so the user can watch the video in fullscreen...
Is there any way?!