Simple question:
is there a way to get video autoplay working on android chrome?
To get working I mean also if there's a workaround.
I looked around and seems I can't. Is it right?
Thank you
Add att muted
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Related
I've tried a few different fixes but I can't figure out why this video I am using in a react app is not playing. I added the autoplay and muted properties but it still won't play. It works perfectly fine when I run it as pure HTML but not with react. Here is the code:
<video width="518" height="518" loop autoplay preload="auto" playsinline="true" style={{maxWidth: "518px"}} muted>
<source src="https://media.tenor.com/f02cT4A-dC4AAAPo/speechless-shocked.mp4" type="video/mp4" />
<source src="https://media.tenor.com/f02cT4A-dC4AAAPs/speechless-shocked.webm" type="video/webm" />
Your browser does not support video.
</video>
autoPlay on video element, is in camelcase in ReactJS
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>
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"
I'm playing a video through the browser using:
<video class="video">
<source src="video.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
It's not working on Apple's through Firefox which I understand is because I'm using the H.264. How do I render to play on an Apple with Firefox as well?
<video class="video">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</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.