HTML Video autoplay is not working on iphones - html

<video width="100%" playsinline preload="metadata" style="object-fit: cover;height:100%" muted="true" autoplay="true">
<source src="{{video_url}}" type="video/mp4"/>
</video>
On a Shopify site, I have a section with Video Background without audio (also muted). playsinline attribute was added.
Does anyone know how to fix this problem?

Related

Video dosn't play on Iphone, but play on chrome

What to change to work on Iphone? In chrome it work.
<video class="video"
autoplay loop preload muted playsinline
poster="#/assets/video/posters/02.png"
>
<source
src="https://drive.google.com/uc?export=download&id=1-SKkq6GLCPXc3MeSvsWED12GK6NkR_Tp"
type="video/mp4"
>
</video>

Video not autoplaying in IOS

I am trying to figure out why the video is not autoplaying in IOS devices?
<div class="video-container">
<video id="intro-video" video-src="https://www.w3schools.com/html/mov_bbb.mp4" poster="" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="1600" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="900" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="480" playsinline autoplay muted loop>
</video>
Playsinline is already added as described in the IOS video documentation
webkit-playsinline is not added
Most modern web-browsers don't allow to auto-play audio and video if there is no interaction from the user, as a click on the webpage.

background video won’t play on mobile

Background video, for my website, is not playing on iPhone:
<video id="video">
<source loop="true" id="vid" src="assets/img/watch.mp4" type="video/mp4">
</video>
use muted and autoplay attribute in video tag
<video id="video" muted autoplay>
<source loop="true" id="vid"
src="assets/img/watch.mp4" type="video/mp4">
</video>

HTML autoplay not working in Chrome and Safari

My aim is to autoplay a song on a website in Chrome and Safari, but it is not working. I found a trick to use an iframe with a silence.mp3 before playing the audio tag, but it also did not work.
My code:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none" type="audio/mp3"></iframe>
<div style="position: fixed; left: 0px;top: 0px;">
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3">
<source src="song.mp3">
Your browser does not support the audio element.
</audio>
</div>
Is there anything I can do about that?
You cant - User interaction is needed to allow play/autoplay media with sound.
Add muted attribute
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3" muted>
...
</audio>
Audio will start to play only without the sound. Then allow user to switch sound on with JS.
EDIT
It seems that this is no longer working with audio tag
Tested with video
<video controls muted autoplay>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3"/>
</video>

In html page video tag is not playing on page load

Here is my code of video tag but it is not working properly on page load, should i need any preloader to autoplay the video on page load`
<video id="video_player" width="100%" autoplay="1">
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
If you just want to autoplay video:
<video id="video_player" width="100%" autoplay>
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
Here is more about it: https://www.w3schools.com/tags/att_video_autoplay.asp