Month: September 2012

Tools and Tips for HTML 5 Videos

With introduction of HTML 5, embedding an video on a web page has become peace of cake! It has overcome the barrier of installing plug-ins(Adobe Flash, Silverlight etc.,).

When i start playing around with HTML 5 Videos, i encountered some problems and i wish to discuss the same, so that it will be helpful for people, who has similar issues.

Before diving in to the content, let me remind the browser compatibility of HTML 5. HTML 5 is supported in following browsers –

  • Microsoft IE 9 +
  • Mozilla Firefox 5 +
  • Google Chrome 10 +
  • Apple Safari 5 +
  • Opera 10 +

So, that means, HTML 5 video is supported only in the above mentioned browser list. For incompatible browser, you may have to use or <object> tags by using Fall back method. You can use Modernizer, to check whether the browser supports HTML 5 Video and provide an fall back method if doesn’t support!

Now, let looks in to the tools. Basically HTML 5 Video supports the following formats –

  • MP4 with H264 video codec and AAC audio codec
  • WebM with VP8 video codec and Vorbis audio codec
  • Ogg with Theora video codec and Vorbis audio codec

All web browsers doesn’t support all the video formats. It totally depends on the web browser.

Browser MP4 WebM Ogg
IE 9 + YES NO NO
Firefox 5 + NO YES YES
Chrome 10 + YES YES YES
Safari 5 + YES NO NO
Opera 10 + NO YES YES

Looks like Apple and Microsoft are great friends Smile because they support similar video format!!!

Now, the challenge is how to encode these videos to the required formats. If you wish to supports for all the browser, you may have to encode your video in all the three formats. After search on the web using Google and Bing, i found these below two software’s, which are pretty good in converting the videos to HTML 5 video support format!

  1. Any Video Converter
  2. Miro Video Converter

Both of the software do a good job in converting the videos in to the required format and it’s simple too!  

We are done converting the videos and we programmed it, and opened the web page…. BOOM… Oops, Video is not playing. It’s says, Video playback aborted due to a network error.

It’s because, MIME type is not set in the Web Server. I will consider, IIS 7 as my web server, and we will see, how to add the required MIME types!

  1. Launch IIS.
  2. Select the website. In the middle pane, under IIS section, select MIME Types icon.

image

3.   Now click on Add… option in the right pane. It will invoke Add MIME Type dialog box.

image

4.    Now add the following file types one by one in the respective edit boxes!

File name extension MIME type
.mp4 video/mp4
.webm video/webm
.ogg video/ogg

5.   Once, you are done adding the file types, close the IIS.

Now try again with the web page, which has video, surprise it’s working now. Yeah! it will work, because, we set the file type information.

NOTE: You can do the same for older IIS versions. For other web servers like Apache, we may have to do similar settings but in different way!

I think it’s time to kick the plug – ins and start using HTML 5 Video!

Happy Web Programming!!!

Thanks!

Windows 8–My Encounter

Windows 8. It’s a new operating system from Microsoft. It’s fast and fluid. Awesome UI and totally new design! Good news is that, Microsoft is unveiling the Windows 8 RT Tablet with own hardware called Surface.

I was bowled with the UI. It needs special mention, because it was an innovation. It totally changed the looks and feel of Windows. Thanks to Microsoft for designing this great product.

 When Windows 8 first announced in BUILD conference, i was surprised on how it’s goanna be! Not again Windows Vista. But it was totally different and was great!

When i started installing Windows 8, it was very fast. Installation was done in 20 minutes and I’m logged in to Windows 8 and started using it. It’s worth mentioning that the Installation was pretty smooth and user friendly.

Though Windows 8 is releasing on October 26th, Microsoft made Windows 8 available to developers and enterprise customers on August 15th in the form of Windows Enterprise Evaluation download – Windows 8 Enterprise Evaluation

Are you excited? Are you sure you want your hands get dirty with Windows 8, then go ahead and download the the Windows Enterprise version from the above link.

NOTE: You can install Windows 8 on VHD, check this link for more information.

Windows 8 for consumers

Microsoft Account – Now you can configure your Windows 8 with Microsoft account(previously Hotmail / Live account). With Microsoft account, you can now sync the contacts, Messaging(Facebook, Twitter, Linked In), Calendar etc.,

Mail is built in to Windows 8. Thanks to Microsoft for this amazing feature. You can now configure your mails accounts – Gmail, Hotmail etc., in Windows 8 with out any hassle.

SkyDrive is an amazing app, which allows you to store your multimedia content in the cloud. Microsoft offers approx. 25 GB of space per account.

XBOX – It’s my all time favourite. Now you can play XBOX games in your Windows 8. It’s amazing!

Bing – Microsoft powerful search engine now comes to Windows 8.  Awesome UI. Especially you got to try Image search! Believe me you will definitely love it!

IE 10  – Much advanced browser. Great support for HTML 5 and CSS 3. You will love surfing the web sites in IE 10! More protection from phishing, Tracking and fake websites!

Windows Store –  Great apps. Installing an app is pretty easy. Though it has few number, but going big.

Picture Password – Now you unlock your Windows 8 pc in a way, by connecting dots on the picture! It’s totally new way of unlocking the PC, than the traditional password or using biometric sensors!

Windows 8 for developers

Windows 8 is now touch enabled. No more keyboard and mouse, now you can operate Windows by hand. That’s awesome. May be it’s a tablet or laptop or computer(Should have touch capability). Now you can create awesome apps by using Windows 8 SDK. Create once and run it on multiple devices, yes what you read is absolutely right. App created for Windows 8 tablet can be installed on a Tablet, laptop or computer too!

Now you can leverage your existing Microsoft .NET skills, to develop Windows 8 apps. XAML, C#.NET / VB.NET should be fine to get started! One good news, with Windows 8, Web application developer can also be a Windows 8 developer – If you know HTML 5, CSS 3 and JavaScript, you are not only a web developer, you are Windows app developer too. Are you not  excited with this?

Great development environment – Visual Studio 2012, totally designed to created great apps for Windows 8. Good news is that VS 2012 Express Edition is totally free and you can download it today to get started – Download VS 2012 Express

Resources to get started –

http://msdn.microsoft.com/en-us/windows/apps/br229512.aspx

http://msdn.microsoft.com/library/windows/apps/hh779072

NOTE: In order create apps for Windows 8, you need to have developer license which can be brought from Microsoft – License

Though i have mentioned some features, there are lot many features for consumers as well as developers to explore, which i leave it to you to explore Winking smile

Finally, I wish Windows 8 great success and looking forward to write some cool articles!

Thanks!