In a previous post I was talking about how to embed audio clip in a blog post and its importance. There I was using latest HTML 5 audio player with self hosted audio file. In order to play it user need only an updated browser, not any 3rd party plug-in.
Today I’m taking it to the next level and going to tell you how to embed a video file in your blog post like a BOSS. It’s almost same as embedding the audio file, only few additional details to pay attention to.
Prepare Video Files
Here we have a minor problem. There is no one common format which is supported by entire browsers. As same as audio file you need a copy of same file in different formats. Most commonly used format is MP4. In order to expand browser compatibility you may include OGG and WebM formats as well.
There are several free video converting software. But my best suggestion is Online-Convert.com. It supports wide set of file formats as input and having MP4, OGG and WebM as output.
Finally upload them to WordPress media library or any other web storage such as DropBox.
Embed Video Files with HTML5
It’s same as audio embedding but you have to include 2 more parameters to specify the videos, width and height. I recommend you to embed video in its original size. If it’s not in required size, re-size it while you convert it in Online-Convert.com.
You are done and here is the outcome.
- Hardware: Intel Core i5 2nd Gen // 4GB DDR2
- OS: Windows 7 Home Premium // 64 Bit
- Browser: Google Chrome Version 23.0.1271.91 m
Hosting video files in your server is not as easy as it’s with Audio file. It will consume huge amount of space as well as bandwidth for transferring. Pay close attention to them. In a storage and bandwidth critical situation, I recommend you to not to use this.
Tags: #Blog #Dropbox #HTML