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
Related
I have a Brightcove video that is set to autoplay with sound, but ONLY when the page is viewed on a mobile device. I set a media query to have the video and it's containers set to "display: none" when it's on desktop. However, the audio still plays on desktop. How can I turn this off?
Is this possible to do with just CSS, ideally without messing with the player itself or adding Javascript?
display:none does not actually remove the item from the DOM. It is still present, just not visible. Any other CSS option will achieve the same end result. If you do not want the player, you will have to make changes in the code to remove it from the DOM.
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 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
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.
I created an Angular app wrapped inside a Phonegap app. I've created a directive, which is a button. When one clicks the button, the video library is returned and a video can be selected. On callback, I receive the video URI (I'm testing on iOS, something like file:///private/var/mobile/Containers/Data/Application/..../tmp/video.MOV).
I'd like to give users a preview of the video they selected, so I create a video tag on this callback:
$('#test').append('<video controls preload="auto" width="340" height="340" onclick="this.play();"><source src="' + videoURI + '" type="video/mp4" /></video>');
The video tag is created successfully, and a play button is visible. Nothing happens when I click the play button, however. The video won't play. Am I doing something wrong? Or is there any other way to play a local video inside a Phonegap application?