How can I remove the controls in Android? Currently, controls="false" this removes the play button in iPhones. How about in Android?
<video playsinline loop muted autoplay controls="false" class="fillWidth" poster="assets/images/Snapshots/The-Launch.jpg">
<source src="assets/images/MP4/The-Launch.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="assets/images/MP4/The-Launch.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</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
The video is set as a background for HTML div:
<video preload="auto" autoplay="" loop="" muted="muted">
<source src="assets/videos/section-video.mp4" type="video/mp4">
<source src="assets/videos/section-video.webm" type="video/webm">
<source src="assets/videos/section-video.ogv" type="video/ogg">
</video>
The video is saved in assets folder (Angular app) the video is fully working on firefox and chrome but not in chrome incognito mode.
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>
<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'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>