I've made a video phone for the site and it's displayed correctly on all browsers, except Safari. I tried to fix it, but nothing helps. What might be the problem?
<div class="main-video-bg" id="main-video-bg">
<video preload="metadata" muted="muted" playsinline autoplay loop poster="./img/video/stalnoff.jpg" id="main-video-bg">
<source src="./img/video/stalnoff.webm" type="video/webm">
<source src="./img/video/stalnoff.mp4" type="video/mp4">
<source src="./img/video/stalnoff.ogv" type="video/ogv">
</video>
</div>
Related
I have a webpage with a background as a video.
The video is well playing in desktop/laptop browsers and in android devices.
The problem is that the video is not playing on iPhone.
The sample code is given below
<div class="banner-container">
<video src="assets/images/BannerVideo.mp4" autoplay muted loop webkit-playsinline preload="auto" ></video>
</div>
I also give the code in an alternate way
<video autoplay muted loop playsinline webkit-playsinline>
<source src="assets/images/newphone.webm" type="video/webm">
<source src="assets/images/newphone.mp4" type="video/mp4">
</video>
But these both are not playing the video on an iPhone.
Can anyone please help me to solve this?
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>
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>
I have video in .mp4 format. and I want show that in my html page, For that I use following tag
<video controls="controls" class="video-ctrl">
<source src="~/Content/Vedio/Care.mp4" type="video/mp4" />
</video>
This is worked in firefox, but not worked in chrome.
You need webm file to play video on webpage.
Example code below:
<video controls="controls" class="video-ctrl">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.webm " type="video/webm" controls>
</video>
And Jsfiddle example
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.