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
Related
I'm trying to add multiple (3) video with same source, but they load multiple times. Do you have any idea how if the source is the same they do not load 3 times?
video::-webkit-media-controls {
display: none;
}
<video width="285" autoplay playsinline muted loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<video width="285" autoplay playsinline muted loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<video width="285" autoplay playsinline muted loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
Chrome Network media
Chrome doesn't load the same video multiple times. I only loaded that video once on Safari, but according to Web Inspector, it loads different sections of the video to reduce the load on your computers memory. For example if you are watching a movie, it doesn't want to load all 2 hours of that 1080p movie onto RAM, so it loads sections of it.
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"
<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.
I have a question about looping MP4's. I have some small MP4 files that have to keep looping (which works great with "autoplay loop". However, after each play, there seems to be a very short delay before it plays again. Is there a way to avoid this? My code is as follows:
<div align="center">
<video autoplay loop class="img-responsive">
<source src="vid/01.mp4" type="video/mp4">
<source src="vid/01.webm" type="video/webm">
</video>
</div>
With poster attitude you can show a thumbnail before it starts.
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
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>