Blog Archives: June 2010

Upgrading our Skins Library

by Meagan Palatino on 2010-06-25 09:21

You may have noticed that we recently enhanced our skins library by adding a handful of new v5 skins for the JW Player for Flash.

The first batch consisted of 22 JW Player for Flash v5 January 2010 Skin Contest submissions.  While we had previously announced just the winners, we received a number of impressive and creative submissions, and wanted to make them all available on the site.  You can now find them in our AddOns Library.  From Selena (the cheese skin) to Trekkie, they're all there now.  Check out the rest of the contest skins here!

Next came the introduction of our second Skin-License Bundle, All Skins by FlashSkins. Created by the design shop FlashSkins for the JW Player v5, these are clear, neutral style skins that work well across all websites.  The 12 skins are currently available in our AddOns Library, and you can grab a commercial license from our order page. 

One of our recently released and newly featured skins is Glow - a JW Player 5.2 specific skin created by Jeroen Wijering.  It is a simple but slick B&W skin resembling the Quicktime X interface. Glow shows off the new features of the 5.2 player skinning model (custom controlbar layout, detailed font control and buffer icon rotation).  For those of you who missed it, read more about the new JW Player 5.2 features here.

Stayed tuned for another new all-skins bundle, and a few extra third party skin submissions that we'll be releasing soon.  If you are interested in creating and submitting your own skin to our AddOns Library, we encourage you to do so here!   For help with building your own skin for the JW Player v5, visit our detailed v5 Skinning Support Guide.

Have fun customizing your player!

  Tweet   Share

An Overview of Audio and Video Transcoding

by Daniel Taylor on 2010-06-22 12:08

This post will try to peel away some of the layers of confusion surrounding media conversion by describing how media are stored, why you might want to convert from one format to another, and tools you can use to do it.

What Is Transcoding?

Transcoding is usually something that happens behind the scenes. For example, when you take a video with a Flip or other handheld video camera and upload it to YouTube, the file is transcoded by YouTube into various formats for distributing and displaying to viewers. You don't see this happening, but it is why videos are not immediately viewable on the site after uploading them. Once the transcoding has finished, you are able to show the video to your users or friends.

To understand what transcoding is, you need to first understand how digital media are stored. A digital media file generally consists of a container with metadata information like the dimensions and duration of the file, along with any number of tracks. Commonly a media file contains an audio track, a video track, and sometimes a subtitle track. Each of these tracks has been encoded (using a codec) into a format that tries to maximize quality while minimizing file size. These encoded tracks are interleaved (or multiplexed) into the container, meaning that they are stored as something like this: a chunk of audio, a chunk of video, the next chunk of audio, the next chunk of video, and so on.

Transcoding is the process of taking digital media, extracting the tracks from the container, decoding those tracks, filtering (e.g. remove noise, scale dimensions, sharpen, etc), encoding the tracks, and multiplexing the new tracks into a new container. Transcoding is most commonly done to convert from one format to another, e.g. converting a DivX AVI file to H.264/AAC in MP4 for delivery to mobile devices, set-top devices, and computers. The basic pipeline looks like the following:

/ decode audio -> filter -> encode \ demultiplex -> decode video -> filter -> encode -> multiplex \ decode subtitles -> filter -> encode /

Why Transcode?

There are a number of reasons for transcoding your media. You may want to convert a high-quality original edit to a digital distribution format easily sent to customers over the Internet, like H.264/AAC in an MP4 container. Or you may want to convert your high-quality music library, stored in AAC or Vorbis, for your music player that only supports MP3 files. Often, you may want to target a specific platform or device, like Adobe Flash, that supports a limited set of formats and thus need to convert your media library to a suitable format for proper delivery. You may even have old MPEG2 HDV tapes that you want to transcode to H.264 High Profile to save 40% of the storage space while losing no noticeable quality.

Some things to keep in mind about transcoding:

• Transcoding always lowers quality*
• Transcoding can take a long time, depending on formats and settings
• The newest formats and codecs are not always best
• Remember your intended audience and their decoding ability (e.g. phones)

* Quality is not lost with lossless formats, but the vast majority of formats are not lossless!

Common Formats and Codecs

You will undoubtedly run into many new and confusing terms as you explore the digital media landscape. It's probably best to try and familiarize yourself with some of the more popular containers and codecs.

Containers

MP4

MPEG4 system container, used by Quicktime and Adobe Flash. This container is quite versatile and has excellent support almost everywhere (from phones to computers).
Extensions: mp4, mov, m4v, m4a, m4b, m4p, f4v, 3gp, 3g2
Synonyms: MPEG4 Part 14, ISO/IEC 14496-14

WebM / Matroska

A versatile container similar in concept to the MPEG4 system container. WebM uses a subset of Matroska to create a container optimized for web media and HTML5. Adobe has also recently announced plans to support WebM in the Flash player.
Extensions: webm, mkv

AVI

Microsoft's generic container format. This can generally store anything and everything. It has excellent support on most computers.
Extensions: avi

FLV

Adobe Flash media container which is useful for storing legacy Flash content and for low-latency live streaming. Adobe's newer format is F4V, a subset of the MPEG4 system container.
Extensions: flv

Video Codecs

H.264

Widely considered the best video codec in the world. This video codec is what powers YouTube, Bits on the Run, and more.
Synonyms: MPEG4 Part 10, MPEG4-AVC, AVC, ISO/IEC 14496-10

VP8

A new video codec for web media, completely free and comparable to H.264 in quality. It was originally developed by On2 but then bought and released for free by Google. This codec is part of the WebM Project.

MPEG4 Video

Last-generation video codec, still widely used in the piracy and home DVD player scene. It requires more file space than H.264 for the same quality, but encodes and decodes faster.
Synonyms: DivX, Xvid, MPEG4-ASP, MPEG4 Part 2, ISO/IEC 14496-2

MPEG2 Video

Video codec generally used on DVDs. It is a few generations old, but given a sufficiently high bitrate the quality is quite good. MPEG2 is also one of the official video codecs for Blu-ray.
Synonyms: MPEG2 Part 2, ISO/IEC 13818-2

Flash Video

Sorenson H.263 for Flash, used before Flash supported H.264. This is also an older generation codec, but is useful for low-power devices that cannot support H.264 or VP8.

Audio Codecs

AAC

Advanced audio codec, widely used by Apple and many portable devices. It can support mono, stereo, and surround sound. Currently the highest quality widely-used lossy audio codec.
Synonyms: MPEG2 Part 3, MPEG4 Part 3, ISO/IEC 13818-3, ISO/IEC 14496-3

Vorbis

Completely free and open audio codec comparable to AAC. Widely used by game developers and Linux/BSD users, this codec is now also part of WebM which will probably mean wider adoption.

MP3

Older but still extremely widely used audio codec. It has the advantage of being supported everywhere and by most every device in existence.
Synonyms: MPEG1 Layer 3 Audio, MPEG1 Part 3, MPEG2 Part 3, ISO/IEC 11172-3, ISO/IEC 13818-3

How to Transcode

There are literally dozens of commonly used formats and many, many software packages that can handle converting between different formats for you, though the speed, quality, and supported input and output formats differ between much of the software. There are even online services setup specifically to transcode media for a fee. If you are willing to get your hands dirty it is quite easy to get free and open source tools that will handle most any format you throw at them.

There exist many third party services online that will transcode files (many for a small fee), such as Movavi Online Converter, Media Convert, Zamzar, and more. These services require that you upload the media file to them, then later download the transcoded result back to your system.

It is also possible to convert media files on your own computer, using both free / open source and proprietary software. Free tools such as Media Coder, Handbrake, and VirtualDub will let you convert and even do some basic editing. Quicktime, Any Video Converter, and many other software packages that can be bought offer these features as well. If you are more interested in getting your hands dirty, you can go right to the source of the tools most of these products use to do the actual transcoding: FFmpeg, FAAC, x264, and WebM.

If you're comfortable with the advanced tools, then using Free and Open Source software like FFmpeg and libx264 is highly recommended. You get a community of video experts helping you, and they can be very friendly when you try to help back. You save money by not licensing large proprietary tools and you get some of the best quality output in the industry.

Hopefully you found this brief overview helpful. Watch this space for more in-depth discussion on this subject including: transcoding your first video, selecting the optimal formats & codecs, choosing the right tools, and more.   Learn more about Transcoding Best Practices here.

Comments (6)   Tweet   Share

Safari & Quicktime are Not Web Standards

by Jeroen Wijering on 2010-06-07 09:19

To call HTML5 Video a hype would be an understatement. Every week, major tech companies announce improved support or new breakthroughs. Literally hundreds of new blogposts a day pop up on Google's blog search. In this debate, no company is as vocal as Apple.

The company's latest move is the release of an HTML5 showcase that includes a video demo featuring the capabilities of web standards such as HTML5, CSS3, and JavaScript. This effort, while exciting, is misleading and potentially detrimental to the landscape of web development and browser compatibilities. The demo is definitely inspiring and helps to move HTML5 Video along at a fast clip. At the same time though, none of the cool gizmos on this page are actually web standards. Instead, they are specific functionalities found in Apple's Safari/Quicktime product stack (which is why access is restricted to Safari). A breakdown:

The Video

Although the video codec debate has heated up with Google's release of WebM, Apple firmly stands by H.264. The demo offers no OGG or WebM version of the video, just an image fallback:

<video id="videoShowcase" width="848" height="352" 
  src=".../demos/apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov" 
  poster="... /images/tron_legacy.jpg" 
  loop="loop" autoplay="autoplay" autobuffer="autobuffer">
  <img src="... /images/tron_legacy.jpg">
</video>

The loaded video is actually not an MP4 but a MOV. MOV, 99% similar to MP4, is the container format of Apple's Quicktime technology. This video only works on Safari, and in order to play this video in Safari on Windows, a user must have the Quicktime plugin installed. No other browser is able to play the video.

A more standards-based approach would be to use an MP4 video instead of a MOV one, while simultaneously also offering an OGG video. That will work on all HTML5 browsers.

The Controls

The scale, mask and perspective video controls are very slick, but unfortunately still browser-specific features. Here's how the CSS of the video looks with these options enabled:

-webkit-mask-image: url(... /images/tron_mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-transform: matrix3d(0.64,0,0.64,0,0,0.83,0,0,-0.53,0,0.76,0,0,0,0,1);
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

This chunk of CSS3 will only render on Webkit-based browsers: Safari and Chrome. Firefox and Opera will not recognize these proprietary style rules.

A more standards-based approach would be to use mask, transform and transition CSS rules using both -webkit-, -moz- and -o- prefixes. Apple could be frank about the draft status of these functionalities and the current differences in browser implementations.

The Description

The description below the video mostly talks about Safari's proprietary HTTP streaming technology:

The HTML5 video tag allows you to integrate video within your website’s code. And Safari offers HTTP streaming, so playback quality dynamically adjusts to the available speed of wired or wireless networks — perfect for viewing on mobile devices such as iPad, iPhone, and iPod Touch.

Unfortunately, HTTP Live Streaming only works on the iPad, iPhone, iPod Touch and Mac OSX 10.6 (with Quicktime X). Additionally, the technology requires one to encode videos into an obscure format: hundreds of small MPEG-TS fragments, glued together using M3U8 playlists. These video files are completely useless for any other browser or media player.

A more standards-based approach would be to explain that seeking to non-downloaded parts of the video (like YouTube) is possible. This functionality, using HTTP Range-Requests, is supported by all HTML5 browsers. HTML5 video at large has no capabilities in the area of bandwidth detection and on-the-fly bitrate switching.

HTML5 is About Standards

Undoubtedly, no one has done as much for HTML5 Video as Apple has to date.  However, we must be sure to not overlook the progress Flash made when they started supporting video a couple of years ago. Suddenly it was possible to easily display videos on a page, regardless of browser or operating system. Only one chunk of code and only one video file were needed; plugin daisychains and forced installations were a thing of the past. Due to its ubiquity, Flash effectively enabled the online video surge of the last few years.

Similarly, the big promise of HTML5 Video is of it being a widely adopted and highly standardized technology. While Apple may see it as a means to reach feature parity with Flash, most web developers see it as a simple solution for including video in a webpage without worrying about plugin support. Web standards are about removing incompatibility barriers altogether. They are not about replacing plugins with proprietary browser addons, which is exactly what Apple has done here.

It would be awesome for Apple to start advocating the use of cross-browser HTML5 Video, being honest about what the technology can and cannot do today. Alternatively, it would be great for Apple to tell developers what its demo actually is: an excellent showcase of the video capabilities of its Safari / Quicktime product stack. Regardless, Apple should stop labelling vendor-specific implementations as web standards. It confuses web developers and it will lead to a new era of browser incompatibility that will slow down the overall adoption of HTML5 - and the conveniences it brings to web developers around the world.

Jeroen Wijering and Zachary Ozer

Comments (19)   Tweet   Share

JW Player 5.2 Introduces New Skinning Features

by Pablo Schklowsky on 2010-06-04 17:19

We're pleased to announce the release of the JW Player for Flash Version 5.2.  One of the JW Player's strongest features is its flexible skinning model.  Our focus for JW5.2 has been on improving on its XML/PNG skinning abilities.

We've also fixed over 30 discrete bugs, and added a number of performance and feature enhancements.

New Skinning Features

• The Controlbar, Your Way - Previously, skin designers could only alter the look and feel of the controlbar buttons. With JW Player 5.2, you can now lay your controlbar buttons out in any order you want, as well as insert any non-button image into the controlbar's layout. Also, there are no longer any required controlbar elements, so you can leave out anything you don't want.
• Customized Buffer Icons - With JW Player 5.2, you have more control over the rotation of the player's buffering indicator. You can control how fast the icon rotates, and the angle of each rotation.
• Fine-Grained Color Support - The new skinning model now supports customized background colors for every player component. You can have one background for the playlist, another for the controlbar, and a third for the display. You can also set colors for all of the text fields in the player as well.
• Advanced Font Controls - The skinning model now supports customization of the controlbar and playlist's text fields. You can change the font size, color, and use all Flash-supported system fonts (_sans, _serif and _typewriter). You can even make them bold and / or italic. Go nuts!
• Slider End-Caps For Everyone - A much-requested feature was the ability to add end-caps to the controlbar and playlist slider elements. The 5.2 player now allows you to create end-caps for the volume slider, the time slider and the playlist slider.

Say Hello to Glow

Created by JW himself, the new Glow skin takes advantage of the new 5.2 skinning features. Check it out for yourself:

You can download the Glow Skin from our Skins Library.

Other Updates

Not a skin designer? No problem! Just sit back and wait as some sweet new skin submissions begin appearing in our Skins Library. We've also got a few updates for you:

Enhancements

• Improves switching logic for dynamic RTMP streams
• Handles YouTube's upcoming URL change
• Specifies playlist and plugin sizes in percentage rather than pixels
  • Example: "playlist.size=50pct"
• Adds support for a "playlist.image" playlist item property, which allows a different thumbnail image to be displayed in the playlist

Bug Fixes

JW Player for Flash Version 5.2 fixes over 30 bugs. Here are a few of the major ones:

• Allows YouTube videos to be embedded in HTTPS pages
• Makes the YouTube logo clickable
• Fixes an issue where some dynamic streams only switch on resize events
• Fixes an issue which would cause dynamically switched RTMP livestreams to close early
• No longer hides the the display image when playing AAC or M4A audio files
• Allows querystring parameters for .flv files streamed over RTMP. This fixes a problem some Amazon CloudFront users were having with private content.

To see everything we've done in this release, check out the complete list of changes in JW Player 5.2 on our developer wiki.

  Tweet   Share