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"
Related
I've been looking at many answers on how to troubleshoot html5 videos that aren't playing on a mobile device, but most are suggesting including mute or playsinline. Currently, my background video is playing perfectly fine on a computer, but still doesn't play on any of the mobile browsers. In fact, nothing gets loaded and only shows a blank page.
<div className="fullscreen-video-wrap">
<video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
<source src={require("./media/web-720cmp.mp4")} type="video/mp4" />
<source src={require("./media/web-720cmp.webm")} type="video/webm" />
<source src={require("./media/web-720cmp.ogv")} type="video/ogg" />
<img src={require("./media/bg.jpg")} alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
The Problem
It looks like muted doesn't work right when using the video tag with react. The muted attribute is required for videos to autoplay on mobile.
If you inspect the html of your webpage in your browser, you should see something like this for your video tag. Notice how there is no muted attribute. There's also no autobuffer or playsinline
<video loop="" autoplay="" poster="/media/bg.jpg">
<source src="/media/web-720cmp.mp4" type="video/mp4">
<source src="/media/web-720cmp.webm" type="video/webm">
<source src="/media/web-720cmp.ogg" type="video/ogg">
<img src="/media/bg.jpg" alt="">
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
The Solution
React should probably fix this, until then you can use something called dangerouslySetInnerHTML to insert an html block into your code. It would look like this
<div className="fullscreen-video-wrap" dangerouslySetInnerHTML={{ __html: `
<video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
<source src="${require('./media/web-720cmp.mp4')}" type="video/mp4" />
<source src="${require('./media/web-720cmp.webm')}" type="video/webm" />
<source src="${require('./media/web-720cmp.ogg')}" type="video/ogg" />
<img src="${require('./media/bg.jpg')}" alt=""/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
` }}></div>
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 have music I want to play and loop on the web page startup. Here's my code:
<audio autoplay="autoplay" loop controls="controls">
<source src="music.mp3" />
</audio>
The question that is a "duplicate" does not suit my needs and does not work for me.
I found out what to do using a div with the visibility to hidden
<div style="visibility:hidden">
<audio controls autoplay loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
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>
I have noticed a strange problem with the HTML5 <video/> tag in Chrome.
Using this, it works fine:
<video poster="023.png" autoplay controls>
<source src="todojunto.mp4" type="video/mp4" />
</video>
This only plays the sound, no video:
<video poster="023.png" autoplay >
<source src="todojunto.mp4" type="video/mp4" />
</video>
If I remove the poster attribute, it works again.
All other browsers (even IE9...!) works perfectly, and I can't seem to find the reason.
Any ideas/help?
Thanks
Video tag's attributes should be specified for strict standard implementation:
<video poster="023.png" autoplay="autoplay" controls="controls">
<source src="todojunto.mp4" type="video/mp4" />
</video>
If this doesn't work, there is something changed in your browser's preferences
I'm surprised your video even shows up. Chrome stopped supporting mp4. You should use a .webm file when working with Chrome for html5 videos.
You need to use muted=""; it does work for video
<div class="wrap">
<video width="auto" height="400px" autoplay="" loop="" muted="">
<source src="Video.mp4" type="video/mp4">
<source src="Video.ogg" type="video/ogg">
</video>
</div>
I've encountered the same error.
I fixed it by adding the preload="auto" tag.
<video autoplay loop preload="auto" poster="023.png">
<source src="todojunto.mp4" type="video/mp4" />
</video>
Don't know if this will work for you, and it's been some time since you asked the question. But maybe this will help someone in the future!
I just converted it to ogv and works well in all browsers. I had problem with firefox but no issues anymore. It was also showing a gray background but now, now anymore. here is my code: you can see it in eargo.com/products
<video class="" style="" autoplay loop>
<source class="" src="video.ogv" >
<source class="" src="video.mov" >
<source class="" src="video.mp4" >
</video>
you may see it after 5-7-2015.