-
Notifications
You must be signed in to change notification settings - Fork 384
Embedding video
You can embed video into your page using the following code.
<video src="video.mp4" width="320" height="200" controls preload></video>Videos are big, and can sometimes take a long time to load. To give your users something to look at while their video downloads, it's best to supply a poster image. This image will be displayed while the video is loading.
You can add a poster image to your video using the code below.
<video src="video.mp4" poster="poster.jpg" width="320" height="200" controls preload></video>The above code snippet will work in every major browser. However, many open-source browsers do no recognise MP4 files, and so will be forced to use a Flash plugin rather than their native player. To allow as many people as possible to use their built-in HTML5 player, it's a good idea to provide another version of your video using an open-source codec.
To do this, first download and install a copy of the excellent Miro video converter.
Using Miro, create a new version of your video using either the WebM or Theora option. Of the two options, WebM is probably the better choice.
You can then link to both the MP4 and the the open-source video using the code below (we're using a WebM file as an example here).
<video width="320" height="200" controls preload>
<source src="video.mp4"></source>
<source src="video.webm"></source>
</video>Most mobile phones can only play videos that are a maximum of 480 pixels wide. If your video is 480 pixels wide or less, then it should already work well on mobile phones.
If your video is high resolution, and you don't want to downgrade it, don't worry! It's possible to provide a lower-resolution version of the video that only mobile phones will use.
To do this, first use your copy of Miro video converter to create a new version of your video using the iPhone option. You can then link to this video using the code below:
<video width="618" height="347" controls preload>
<source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
<source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
</video>If you want your users to have the best possible experience, it's a good idea to provide them with a poster image, and two alternative versions of your video (one for mobile, and one open-source).
By following the steps above, you should have already created your poster image and the two alternative videos. You can combine them all together using the following code.
<video poster="poster.jpg" width="618" height="347" controls preload>
<source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
<source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
<source src="video.webm"></source>
</video>Sometimes, Internet Explorer 9 will use the Flash fallback player, even though you want it to use the native HTML5 player. You can force IE9 to run in "edge" rendering mode, and use the native player, by adding the following meta tag to the <head> of your document.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">Video hosting is tricky, and it's hard to get right first time. Here are a few simple troubleshooting steps to get things running smoothly.
Step 1: Check your server settings
To play correctly in Firefox, your server needs to be sending video files using the correct mimetype.
To ensure that your server is playing nicely, create a file called .htaccess in the root of your
site, and add the following lines:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
If you're not using Apache to serve your files, then the above settings have to be altered slightly. Instructions on how to set up mimetypes for windows servers can be found here for IIS6 and IIS7.
Step 2: Check your Flash security settings
If you're having problems getting your videos to work locally, make sure you go to the Flash Security Settings page and add your working directory.
Step 3: Check your video encoding
Some MP4 files are a bit weird, and won't play properly on the web. You can generally fix this by re-encoding your video with Miro video converter, using the MP4 option. If you don't want to install any software, you could also try the online MP4 Generator by Reloado.
Step 4: Ask for help!
Sometimes nothing works. It's okay, the html5media project has it's own mailing list, where a friendly developer will be happy to help you out. Just send an email to html5media@googlegroups.com, and someone will get back to you as soon as possible.