the video working fine in all other devices and android but not even display in Safari , iPhone and iPad, i use all tags like playsinline and playsnline in camel case, but till facing problem and if i upload video on any server and used the url like: https://video.mp4 then it works fine. but static video like: video.mp4 not play even not show, only display a blank page here is my code:
<video width="100%" autoplay muted loop playsInline>
<source src="cuted_preview.mp4" type="video/mp4">
</video>
<video width="100%" autoplay muted loop playsinline>
<source src="cuted_preview.mp4" type="video/mp4">
</video>
Related
I have a webpage with a background as a video.
The video is well playing in desktop/laptop browsers and in android devices.
The problem is that the video is not playing on iPhone.
The sample code is given below
<div class="banner-container">
<video src="assets/images/BannerVideo.mp4" autoplay muted loop webkit-playsinline preload="auto" ></video>
</div>
I also give the code in an alternate way
<video autoplay muted loop playsinline webkit-playsinline>
<source src="assets/images/newphone.webm" type="video/webm">
<source src="assets/images/newphone.mp4" type="video/mp4">
</video>
But these both are not playing the video on an iPhone.
Can anyone please help me to solve this?
I'm trying to autoplay video without sound and controls on my iPhone 14Pro. The video should also repeat so I have included a loop option. It seems like the video does not show at all on iOS devices. Everywhere else works. The iOS version I have is 16.2.
I have tried to add options like autoplay muted and playsinline but nothing seems to have an effect. Here is the code:
<video class="video" preload="none" muted loop autoplay playsinline>
<source src="my-video.mp4" type="video/mp4" />
</video>
Is there any workaround how I can make this work on iOS devices without controls and autoplay?
i want to add a loop video on my react-app.
I did it like this
<video
ref={videoRef}
playsInline
autoPlay
muted
loop>
<source src={Video} type='video/mp4' />
</video>
it's working fine on Chrome/Firefox on mobile and on desktop.
But it's not playing on iPhone (Safari).
It is playing locally but when i deploy it. it's not playing :(
I had a similar kind of requirement with my previous project, the following code is working fine, from this we will have a muted video running in loop with autoplay.
<video width="300px" height="500px" autoplay="autoplay" muted loop>
<source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
</video>
This is so because, according to the apple documentation, a video only plays automatically if:
it contains the playsinline attribute, and
it has no audio track present OR it contains the muted attribute.
So I'd suggest you include the playsinline attribute. Learn more on inline playback here.
I created a sandbox and deployed but was unable to reproduce your issue on iOS 15.2 (iPhone 12), it autoplays and loops as expected. Could please add more details?
this screenshot on mobile, the video doesn't autoplay even when i click on the play arrow button(which shouldn't even be there) still doesn't play at all, its like a picture but on desktop it's perfectly fine.
I tried this code
<video preload autoplay loop muted defaultMuted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
but still no
Trying to get a simple video to play on main page of website. I've included all three types of videos, and it works just fine on Chrome, Firefox, and Opera. But no Safari.
Website can be seen here:
outoftheboxtechnology.appspot.com
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="/assets/media/six-points.webm" type="video/webm">
<source src="/assets/media/six-points.mp4" type="video/mp4">
<source src="/assets/media/six-points.ogg" type="video/ogg">
</video>
You need Safari 4.0 to make the <video> tag to work. Perhaps you can put a notice on your website for your users. Once you meet that condition:
Make sure your src (in your case /assets/media/six-points.webm etc) is valid and the source exists.
Make sure you
open the Web Inspector in your Safari and check if the tag is
properly placed in the DOM.
Example:
<section>
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</section>
Safari 3.1+ supports it (Desktop).
Try this syntax
<video src="http://example.com/path/mymovie.mp4" controls></video>
Source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html