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>
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
in this HTML video tag, the autoplay is not working properly, I don't know what's the problem, here is the code and link which this will show the video.
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
this is the link with the video
https://winmagictoys.com/hairdorables/
Because Chrome don't allow autoplay media onload until user has interacted with the webpage. So you need to add an hidden autoplay iframe with silence sound.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
You can get silence sound file from here https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3.
So your html code should be
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
Add muted. If you want to loop, you can use loop
video {
height: auto;
vertical-align: middle;
width: 100%;
}
<video autoplay loop muted controls>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to mute the video to do auto play after changing a browser policy.
Autoplay only work if your video is muted.
<video controls autoplay id="header-video" muted>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Try this
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
seems like u wanna run it when the page is loaded and that is easily done with js
1st set a function in ur body tag:
<body onload="pageloaded()">
in js: var video = document.getElementById(header-video);
function pageloaded() {
video.play();
}
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.
how to change a preview for html5 video?
I need to show custom image, when user clicks on it video is playing.
<video controls="controls">
<source src="1.webm" type="video/webm">
<source src="1.mp4" type="video/mp4">
</video>
add poster attribut to video tag...
<video controls="controls" poster="url_to_img.jpg">
<source src="1.webm" type="video/webm">
<source src="1.mp4" type="video/mp4">
</video>
to set the preview of the HTML5 video you must know about poster attribute in video tag.
So it should look something like this
<video width=blah height=blah poster=blah >