This article - https://blog.synq.fm/html5-video-looping-autoplay-on-ios-and-android - says it's enough to add "autoplay muted loop playsinline" to a video for it to correctly autoplay on mobile devices, but it doesn't work. An example - http://michaelmedvedskiy.website/
Which has the code
<video autoplay loop muted playsinline id="myVideo" >
Is there a concistent way to make muted autoplay work through out the devices?
I had tried the following line:
<video autoplay loop muted playsinline id="myVideo" >
It did not work for me either.
Then I did the below and it worked and I have no idea why this made a difference, but it did.
<video width="100%" allowfullscreen="true" muted="muted" autoplay="autoplay" playsinline="playsinline" loop="loop">
<source src="myVideo.mp4" type="video/mp4" />
</video>
I did the below and it worked and I have no idea why this made a difference, but it did.
muted="muted" autoplay="autoplay" playsinline="playsinline" loop="loop"
Related
My 2 second video not playing, but I've tried with 10 second and it worked perfectly. Why is that? Does HTML don't play videos that are shorter than 1-2 second?
It's only an image, help please.
<video autoplay loop id="video-background" muted plays-inline>
<source src="video.mp4" type="video/mp4">
</video>
mistake in your code.
try with playsinline
<video autoplay loop id="video-background" muted playsinline>
<source src="video.mp4" type="video/mp4">
</video>
source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/video
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 am trying to make a looping iframe with no controls which will loop.
<iframe
src="yeet.mp4" allow="autoplay" controls="false" loop="true" style="display:visible" id="iframeVideo">
But it has controls on and is not looping. How do i fix it?
Just remove the loop="true" and leave it as an attribute without value like so
<video loop src="yeet.mp4" autoplay>
Your browser does not support HTML5 Player
</video>
The best way to go about this is via Javascript
<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
loop ="true" is no longer supported, as is autoplay="autoplay"
<video poster="video/vr.png" id="bgvid" preload="auto"
playsinline autoplay muted loop >
<source src="video/VR-video.mp4" type="video/mp4">
<source src="video/VR-video.mp4" type="video/mp4">
</video>
When I removed muted attribute video stop playing on safari browser. I want the video to be audible
You cannot remove it programmaticly. It must Be unmuted via a user event like a click.
Can someone tell me why the following tag only showing the poster image and not the video.
<video loop preload="auto" poster="https://v.cdn.vine.co/r/thumbs/6E3D5C44EF971106677480906752_1b2782bf8bc.3.1.mp4_4k51O7l0pibzJwSKxYQnhzNhClScxGOtyylyyd97BYQc._hwWqToJivTuKAp7nE0.jpg?versionId=RbNdo0ARrcYsa1ETobYaSkGe_gyX535k">
<source src='http://v.cdn.vine.co/v/videos/A69BFCDF-56E8-44A2-AA05-DB090DAA2901-5135-000002D2B5159EF7_1.1.1.mp4' type="video/mp4">
</video>
Add the autoplay at the end of the Video TAG
<video loop preload="auto" poster="https://v.cdn.vine.co/r/thumbs/6E3D5C44EF971106677480906752_1b2782bf8bc.3.1.mp4_4k51O7l0pibzJwSKxYQnhzNhClScxGOtyylyyd97BYQc._hwWqToJivTuKAp7nE0.jpg?versionId=RbNdo0ARrcYsa1ETobYaSkGe_gyX535k" controls autoplay>
<source src='http://v.cdn.vine.co/v/videos/A69BFCDF-56E8-44A2-AA05-DB090DAA2901-5135-000002D2B5159EF7_1.1.1.mp4' type="video/mp4">
</video>
you need controls and/or autoplay
<video autoplay controls loop preload="auto"> ... </video>