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.
Related
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>
I'm working on a website with a HTML5 video tag. The video doesn't play on the website. But if I test it somewhere else, it plays without a problem.
http://carflow-staging.houston-1.hybridmedia.be/
My code is here:
<video class="video-splash__video" width="720" height="405" autoplay="" poster="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/img/videoCarflowBackground.png">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.mp4" type="video/mp4">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.ogg" type="video/ogg">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.webm" type="video/webm">
Your browser does not support the video tag or the file format of this video.
</video>
What could be the issue?
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>
I'm using video tag to display a video in my website. Everything works fine in desktop browser but in chrome mobile browser (android at least) video is not displayed inside the "video container" if I don't push play button. There is a transparent "window" with the play button over it and with the controls below.
I have seen something similar over the internet but there was a light gray background where should be the video before playing it.
I set preload="auto" but it did not work.
<video class="img-responsive video" preload="auto" controls>
<source src="./videos/apresentação.mp4" type="video/mp4">
<source src="./videos/apresentação.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Solved! I used poster attribute to apply an image inside video tag:
<video class="img-responsive video" poster="./videos/poster.jpg" preload="auto" controls>
<source src="./videos/apresentação.mp4" type="video/mp4">
<source src="./videos/apresentação.webm" type="video/webm">
<p>Your browser does not support the video tag.</p>
</video>
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>