Video not autoplaying in IOS - html

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.

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>

HTML Video autoplay is not working on iphones

<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?

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>

How can I load only the appropriate video in HTML?

I have two videos, one for mobile and one for desktop. I use a media query to display them. My question is: Do both still "load"? I use a very small file for the mobile version but it seems to take forever to load still, which leads me to believe both are still being loaded. Here's my code:
HTML:
<video class="headVid1" playsinline autoplay muted loop preload="auto" id="bgvid">
<source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>
<video class="headVid2" playsinline autoplay muted loop preload="auto" id="bgvid">
<source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>
CSS:
.headVid2{
display: none;
}
#media (max-width:768px){
.headVid1{
display: none;
}
.headVid2{
display: block;
}
video#bgvid{
max-width:100vw !important;
}
}
You should set appropriate preload attribute ("none"). Example:
<video class="headVid1" playsinline autoplay muted loop preload="none" id="bgvid">
<source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>
<video class="headVid2" playsinline autoplay muted loop preload="none" id="bgvid">
<source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>

HTML video rewinder

I would like to ask if there is someway I can hide this rewind line from my webpage?
I have a website with fullscreen video and I would like to disable any kind of rewinding.
My code:
<video autoplay="true" loop controls muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can't hide only the video scroller. You can hide the entire controls panel:
Just lose the controls attribute from your <video> tag:
<video autoplay="true" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>