How to embed a local (desktop computer) mp4 into a local XHTML? - xhtml

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" />

Related

Video not showing in Iphone Devices

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>

Wordpress: Background Video on Android and 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>

HTML5 Video - Fallback Linked Image

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>

How to play video with HTML5?

The video doesn't play:
<asp:DataList ID="DL_Media" runat="server">
<ItemTemplate>
<video src="windowsmedia.ogg" controls="controls" width="215" height="160">
<object id='mediaPlayer' width="215" height="160"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="fileName" value="res/Files/test.wmv" >
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="loop" value="true">
</object>
</video>
</ItemTemplate>
</asp:DataList>
Make sure your browser is compatible
First, make sure the browser you are attempting to view in supports the HTML 5 video element.
Sample code
Taken shamelessly from the developer site at Mozilla:
Embedding a video
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
Embedding a video with multiple sources
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
Specifying codecs required
<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>
Other samples on the site include controlling playback and fallback options.
Use source instead of object
<video controls>
<source src="res/Files/test.wmv" type="video/wmv">
Your browser does not support the <code>video</code> element.
</video>

How to style audio player?

I am trying to style a audio player that generates when the user clicks a music file.
In developer tool in chrome, the structure is like the following
<embed src='music.wav' >
#document
<html>
<body>
<video controls autoplay name='media'>
<source src='music.wav' type='audio/x-wav'>
</video>
<body>
<html>
</embed>
How do I style the video player that chrome generated in this case?? Thanks a lot!

Resources