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).
Related
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>
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 have an HLS link from Vimeo which I want to put into an html5 video tag.
This is the link: http://player.vimeo.com/external/123834994.m3u8?p=high,standard,mobile&s=53a796101334e99bff44f62f9e7a28df
This is the video tag:
<video autoplay muted loop class="bgvid" id="HomeVideoBig">
<source src="http://player.vimeo.com/external/123834994.hd.mp4?s=8cd812ab0db3a9ce0d256814f9e6dcd8&profile_id=113" type="video/mp4">
</video>
How should I do this?
I am using asp.net.
I want it to work properly on all browsers.
Use the provided link as src and application/x-mpegURL or
vnd.apple.mpegURL for type.
Please note that HLS is not supported natively on all browsers/devices. On desktop only Safari 6+ has native HLS support. You'll have to use a player which offers Flash fallback. Some players that will work are:
paid: JWPlayer (HLS needs Premium), Flowplayer
open-source: Clappr
See more: HLS Device Compatibility
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" />