http://flynautwork.com/newfountain/index.php
I have used HTML Video tag on home page for video which is working on all pc and laptops and even on android Devices but nothing is showing on iPhone devices . Need Help !!
Please Try this I think should be work:-
<video id="myVideo" loop="" muted="" autoplay="" playsinline="" webkit-playsinline="">
<source src="fl-admin/images/fw-home.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Related
My video mp4, Webm format are not working on safari mobile ( video on autoplay ) using wordpress with a theme called avada.
This is what the video looks like on mobile safari
Can you post the html and css output that the WordPress theme generates?
Autoplay videos didn't work on mobile iOS previous to iOS 10, and in order to get video to autoplay on iOS 10, the
playsinline
attribute must be added to the video element like so :
<video autoplay loop muted playsinline poster="images/poster.jpg" class="fullscreen-video">
<source src="video/vid.mp4" type="video/mp4">
<source src="video/vid.webm" type="video/webm">
</video>
The muted attribute is necessary to play on mobile Android Chrome, and the playsinline attribute will make the above autoplay on mobile Safari on iOS 10 (but not previous versions of iOS).
I am working on this website (Developed using Wordpress) and as you can see i have a Background Video in the homepage ( .mp4 file).
The Background Video works on Desktop but not on Android and iOS.
Do you have any tips to solve this issue?
Also via JS...
If you need to convert your video into WEBM and OGV, you could convert it here:
www.converterpoint.com
Disclaimer: I am the owner of that website
Do you have only one format of background video? .mp4
You need three video files .mp4, .ogg, .webm to make your video play on different browsers and devices:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I am new to stackoverflow and I need some help in HTML5 and CSS3 as I am a newbie to responsive design / media queries. (I have used the forum search, but I couldn't find an answer on my question.)
I would like to display different videos for different viewports.
Could you guys help me to fix the following HTML code:
video {
width:100%;
height:auto;
}
<div id="vid-container">
<video id="video" controls>
<source src="vid/video1.mp4" type="video/mp4" media="all and (min-width: 1024 px)">
<source src="vid/video1.webm" type="video/webm" media="all and (min-width: 1024 px)">
<source src="vid/video2.mp4" type="video/mp4" media="all and (max-width: 1023 px)">
<source src="vid/video2.webm" type="video/webm" media="all and (max-width: 1023 px)">
</video>
</div>
Thank you guys a lot in advance for helpfull tipps, tricks and answers.
Cheers!
To create different quality settings for videos, it is often seen that the 'media' attribute is included in the source-tag (which may be nested in the video-tag; as above). Attention: This is not recommended by the W3C as well as not supported by some browsers, such as Google Chrome. Different video quality settings may get implemented by using JavaScript instead: Chrome not respecting video source inline media queries
I'm looking to display a linked image to show when my video isn't compatible.
My code is as follows:
<video controls poster="/sites/default/files/image/CRM-Systems-Video.png">
<source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
<source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">
<a href="http://content.workbooks.com/free-trial-workbooks-crm?utm_source=Homepage&utm_medium=laptopimage&utm_campaign=laptophomepage">
<img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">
</a>
</video>
However when I use Browser Stack to test IE8 (non compatible with <video>) no image is shown? Is this due to the link?
Browser shots link: http://www.browserstack.com/screenshots/663ccadc9d1c2a3aa880fb4e1ef111c4eb386c79
Adding the following to the start of your <head> will do it:
<script type="text/javascript">
document.createElement("video");
</script>
This tricks IE8 into recognising the <video> element, as IE does not display any tags it does not recognise. I tested this and the link appeared, although <source> files are ignored.
Heres an example (you should see nothing on modern browsers, but browsers lacking video support will display a text):
<script type="text/javascript">
document.createElement("video");
</script>
<video>
You are on an older browser
</video>
I have an mp4-video on my computer (a Mac). When I drag the file to a browser window in Firefox, the video plays. So obviously all necessary plugins are installed.
But when I try to embed the video into a XHTML file with the <object>, <video> and/or <embed> tags, using code from this site and elsewhere on the web, I see a message that no video was found in a supported format or MIME-type.
How can I embed a local video into a local XHTML file, so it shows up inside an XHTML page with text surrounding it?
Current code sample:
<video width="640" height="360" controls="controls">
<source src="/path/to/Video%20File.mp4" type="video/mp4" />
</video>
Result:
does the following work for you?
<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
Okay, what works is:
<embed src="/path/to/Video%20File.mp4" type="video/mp4" />