I want to play video when user comes to the page, it is working fine for all the platform except IOS.
I am using react-player npm. I have tried by passing muted property but doesn't work.
My code looks like this
<ReactPlayer playing=true url="video_url" muted loop=true />
Thanks in advance !
I think you need the playsInline attribute for iOS autoplaying in non-fullscreen, as per https://webkit.org/blog/6784/new-video-policies-for-ios/:
On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
react-player supports it as a prop.
Note that I is uppercase playsInline
// Example #1
<video playsInline />
// Example #2
<Player playsInline attr={someValue}>
Related
I am using AMP story player but it is not autoplay bydefau it. Even I set autoplay is true.
It works when I click on it. please suggest a possible solution.
Ok Let me explain my situation, I am trying to build a Cover section for a profile page, where users can set either an image or a video as their cover.
I am unsure how to render both a video file and an image file based on the provided file URL.
I tried to find a similar project, but I found none.
Can you guys help me with how to accomplish this?
Yes you can do if just use Vide tag and put the same url in poster and src
<video width="100px" poster="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" muted autoplay loop ></video>
<video
width="100px" poster="https://clashdome.io/images/newHome/video_home.mp4" muted autoplay>
<source src="https://clashdome.io/images/newHome/video_home.mp4" type="video/mp4">
</video>
so if its a video then it will run as a video if its a image then it will render as image, also idk if its correct according to accessibility but its pretty clean and does the job perfectly
I have a video component added like this
<video autoplay loop src="/vids/vid.mp4">
But it is not playing automatically.
What am I missing?
This worked
Use autoPlay instead of autoplay for react.
Also add muted
So, the code will be <video autoPlay muted loop src="/vids/vid.mp4">
if you want to use the autoplay with small letters, you should assign the value autoplay="true"
You need to add the muted attribute, like so:
<video muted autoplay loop src="/vids/vid.mp4">
For more, you can have a look:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
This might help:
I was working with ReactFullpage and the video would not autoplay on mobile devices.
so I added data-autoplay="" and it got fixed.
I don't have any thumbnails displayed when the video is not launched on mobile, but on the web I do have the preview, if anyone has an idea, thanks.
<Video><video playsInline controls width="300" height="300">
<source
src="4.mp4"
type="video/mp4"
/>
Sorry, your browser doesn't support embedded videos.
</video></Video>
I had this issue also on my React.js application only on a mobile view.
I've tried to add the preload="metadata" attribute without success, and also tried another hack to add this string at the end of the URL - "#t=0.001" that should stop the video one second before, and still the same issue.
I found a nice solution that also allows you to control the thumbnail by adding a poster attribute with a URL of the image that you want to display. it looks like that in the code:
<body>
<video
width="400"
height="350"
controls
poster="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png">
<source
src="https://media.geeksforgeeks.org/wp-
content/uploads/20200409094356/Placement100-_-GeeksforGeeks2.mp4"
type="video/mp4">
</video>
</body>
I have a video tag.
<video id="video1" poster="{{video.poster}}" ng-click="video.playIt()" controls>
<source src="source.mp4" type="video/mp4">
</video>
I want to be able to click my video's poster or the controls to start the video.
Then be able to pause and play the video by the video's controls or clicking anywhere inside the video element.
Here is my app.js...
$scope.video.playIt = function() {
if (jQuery("#video1").get(0).paused) {jQuery("#video1").get(0).play();}
else {jQuery("#video1").get(0).pause();}
}
At the moment I can start the video by clicking on the poster, and pause / play it by clicking on the video's element. However the controls do not work.
I think there may be a conflict with ng-click. I have added one but I think the video may have one already attached which is why there is a conflict.
Any help would be appreciated.
Thanks