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?
Related
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?
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>
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
I've made a video phone for the site and it's displayed correctly on all browsers, except Safari. I tried to fix it, but nothing helps. What might be the problem?
<div class="main-video-bg" id="main-video-bg">
<video preload="metadata" muted="muted" playsinline autoplay loop poster="./img/video/stalnoff.jpg" id="main-video-bg">
<source src="./img/video/stalnoff.webm" type="video/webm">
<source src="./img/video/stalnoff.mp4" type="video/mp4">
<source src="./img/video/stalnoff.ogv" type="video/ogv">
</video>
</div>
I have added a code for playing video as a banner but facing one problem in that is whenever the video is completed getting a black screen for a moment and again the video is playing.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>
I have tested this in all the browser. Please take a look to the attributes in this tag and this will also work in your case.
<video width="400" controls playsinline loop muted >
<source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
UPDATE: newer versions of mobile phone browsers on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel. :-)
For more details on the UPDATE section read this:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I've amended your tag a little to include autoplay loop instead of autoplay="true" loop="loop".
I also think you've just got your HTML syntax a little wrong - instead of putting the source in a <source> tag, you should include a src="" within the <video> tag like so:
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>
As you can see there's no black screen at the end of this looping video. If it is still happening on for you with your own material, it might actually be your video that has a slight gap at the end?
Here is my html for making my video autoplay and loop with no problems. Give this a try.
<video muted autoplay loop>
<source src="" type="video/mp4" />
</video>