Video conversion into the required HTML5 Video playback

Exclusive offer: get 50% off this eBook here
HTML5 Video How-To [Instant]

HTML5 Video How-To [Instant] — Save 50%

Over 20 practical, hands-on recipes to encode and display videos in the HTML5 video standard with this book and ebook.

$12.99    $6.50
by Alex Libby | September 2013 | Web Development

In this article by Alex Libby, the author of HTML5 Video How-To, you will learn to convert a video into any of the formats needed for HTML5 Video playback.

In this article, we will cover:

  • Transcoding video into new HTML5 format

  • Installing playback support

(For more resources related to this topic, see here.)

If you have issues with Playback support and probably thinking that you would play any video in Windows Media Player, it is not so as Windows Media Player doesn't support all formats. This article will show you how to fix this and get them playing.

Transcoding audio files (must know)

We start this section by getting ready the files we are going to use later on—it is likely you may well have some music tracks already, but not in the right format. We will fix that in this task by using a shareware program called Switch Audio File Converter, which is available from http://www.nch.com.au/switch for approximately USD40.

Getting ready

For this task, you need download a copy of the Switch Sound Converter application—it is available from http://www.nch.com.au/switch/index.html. You may like to note that a license is required for encoding AMR files or using MP3 files in certain instances—these can be purchased at the same time as purchasing the main license.

How to do it...

  1. The first thing to do is install the software, so let's go ahead and run switchsetup.exe—note that for the purposes of this demo, you should not select any of the additional related programs when requested.

  2. Double-click the application to open it, then click on Add File and browse to, and then select the file you want to convert:

  3. Click on Output Format and change it to .ogg—it will automatically download the required converter as soon as you click on Convert. The file is saved by default into your Music folder underneath your profile.

How it works...

Switch Sound File Converter has been designed to make the conversion process as simple as possible—this includes downloading any extra components that are required for the purposes of encoding or decoding audio files. You can alter the encoding settings, although you should find that for general use this may not be necessary.

There's more...

There are lots of converters available that you can try—I picked this one as it is quick and easy to use, and doesn't have a large footprint (unlike some others). If you prefer, you can also use online services to accomplish the same task—two examples include Fre:ac (http://www.freac.org) or Online-Convert.com (http://www.online-convert.com). Note though that some sites will take note of details such as your IP address or what it is you are converting as well as store copies for a period of time.

Installing playback support: codecs (Must know)

Now that we have converted our audio files ready for playback—it's time to ensure that we can actually play them back in our PCs as well as in our browsers. Most of the latest browsers will play at least one of the formats we've created in the previous task but it is likely that you won't be able to play them outside of the browser. Let's take a look at how we can fix this by updating the codecs installed in your PC.

For those of you not familiar with codecs, they are designed to help encode assets when the audio file is created and decode them as part of playback. Software and hardware makers will decide the makeup of each codec based on which containers and technologies they should support; a number of factors such as file size, quality, and bandwidth all play a part in their decisions.

Let's take a look at how we can update our PCs to allow for proper playback of HTML5 video.

Getting ready

There are lots of individuals or companies who have produced different codecs, with differing results. We will take a look at one package that seems to work very well for Windows, which is the K-Lite Codec Pack. You need to download a copy of the pack, which is available from http://fileforum.betanews.com/detail/KLite-Codec-Pack-Basic/1094057842/1 —use the blue Download link on the right side of the page. This will download the basic version, which is more than sufficient for our needs at this stage.

How to do it...

  1. Download, then run K-Lite_Codec_Pack_860_Basic.exe. Click on Next.

  2. On the Installation Mode screen, select the Simple option.

  3. On the File Associations page, select Windows Media Player.

  4. On the File associations screen for Windows Media Player screen, click on Select all audio:

  5. On the Thumbnails screen, click on Next.

  6. On the Speaker configuration screen, click on Next, then Install. The software will confirm when the codecs have been installed.

How it works...

In order to play back HTML5 format audio in Windows Media Player, you need to ensure you have the correct support in place; Windows Media Player doesn't understand the encoding format of HTML5 audio by default. We can overcome this by installing additional codecs that tell Windows how to encode or decode a particular file format; K-Lite's package aims to remove the pain of this process.

There's more...

The package we've looked at in this task is only available for Windows, if you are a Mac user, you will need to use an alternative method. There are lots of options available online—one such option is X Lossless Decoder, available from http://www.macupdate.com/app/mac/23430/x-lossless-decoder, which includes support for both .ogg and .mp4 formats.

Summary

We've taken a look at the recipes that show you to transcode a video into HTML5 Format and install playback support. This is only just the start of what you can achieve using this article—there is a whole world out there to explore.

Resources for Article :


Further resources on this subject:


HTML5 Video How-To [Instant] Over 20 practical, hands-on recipes to encode and display videos in the HTML5 video standard with this book and ebook.
Published: October 2012
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Alex Libby

Alex Libby is from an IT support background. He has been involved in supporting end users for the last 15 years in a variety of different environments, and currently works as a Technical Analyst, supporting a medium-sized SharePoint estate for an international parts distributor, based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the Open Source movement, and in particular experimenting with CSS/CSS3 and HTML5. To date, Alex has written five books based on jQuery, HTML5 Video, and CSS for Packt Publishing, and has reviewed several more (including one on Learning jQuery). jQuery UI 1.10: The User Interface Library for jQuery is Alex's sixth book with Packt Publishing.

Books From Packt


Instant HTML5 Responsive Table Design How-to
Instant HTML5 Responsive Table Design How-to

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Instant HTML5 Local Storage How-to
Instant HTML5 Local Storage How-to

Instant HTML5 Presentations How-to
Instant HTML5 Presentations How-to

HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development

Instant HTML5 Geolocation How-to
Instant HTML5 Geolocation How-to

Instant Migration to HTML5 and CSS3 How-to
Instant Migration to HTML5 and CSS3 How-to

Instant Cytoscape Complex Network Analysis How-to
Instant Cytoscape Complex Network Analysis How-to


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
8
S
6
C
1
y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software