Publishing audio or video media on the web? When creating audio or video for publication on the web, here are some guidelines to ensure that yours can be heard and viewed on all computers, tablets  and smartphones. The only assumption is that your target audience isn't still on dial-up.

Audio for Web

  • File Format: MP3
  • Standard Quality (for speech): 22 kHz, 64 Kbps/mono
  • High Quality (for music): 44.1 kHz, 128 Kbps/stereo
  • Super High Quality (for full range of music): 44.1 kHz, 192 Kbps/stereo

Offline Source Files: Should be saved in WAV format, 44.1 kHz, 16-bit, stereo (also known as CD quality) -- or other lossless/uncompressed formats in order to preserve the best possible recorded quality.

Audio Editing Tool: If you can't afford applications like Adobe Audition, take a look at Audacity.

Videos for Web

General Information

  • File Formats: MPEG4 (H264 + AAC).
  • Frame Rate: 29.97 fps
  • Automatic key frame placement
  • Standard SD: 640 x 480 (4:3)
  • Wide SD: 640 x 360 (16:9)
  • Wide HD: 720 x 480 (16:9) for instances where Internet connection speed might be an issue.
  • Wide 720p: 1080 x 720 (16:9) for instances where you are showing with small details such as computer screencasts.
  • Whether you choose standard or wide is related to how it was recorded: It is highly recommended to maintain the original video's aspect ratio.

Standard Video Quality (for speeches and screencasts / webinars)

  • Video: 300 Kbps
  • Audio: 22 kHz, 64 Kbps mono

High Video Quality(for action/music)

  • Video: 700 Kbps, 2-pass VBR
  • Audio: 44.1 kHz, 128 Kbps stereo

Media Quality (TV for example)

  • Highest quality available (1080p) for the Media

Offline Source Files: Should be saved in AVCHD 1080p (16:9) or AVCHD 480i (4:3) -- or other lossless/uncompressed formats in order to preserve the best possible recorded quality.

Video Editing Tools: If you can't afford applications like Adobe Premiere, take a look at some free alternatives including HitFilm Express, DaVinci Resolve, ShotCut, VSDC and Kdenlive.

Video Closed Caption (CC) / Described Video (DV)

This is the text that you sometimes see as people are talking, singing (closed caption) or actions are being performed (described video) during a video. It is also an important part of making your videos accessible to everyone including those who can't hear and to those who can't see.

There are a couple ways in which you can create closed caption and described video text to be added to your video: XML (TTML) OR Text Transcript (HTML5).

You can also include a transcript of your video on the same page. This will not only help those who must use screen readers, but it will also help search engines to find and index your web page since most of them can't index audio or video content accurately.

Closed Caption / Described Video Creation Tool: Subtitle Horse

Optimizing Delivery of Your Video Content

Some web hosting providers may limit the amount of data or speed of the data that can be downloaded from your website. In addition, chances are, your website is probably not optimized to reliably deliver video content. Consider putting your videos on YouTube. In most cases it's free and their equipment is geared to deliver better quality video than anything you might have.

When you upload your video, YouTube will give you the option of making the video publicly available or just to people with the URL. It will even give you the HTML5 code to paste the player into your web page so that you can have the video appear right in your web page (known as embedding the player in the page).

Tips for Screencasting

In addition to the above mentioned recommendations regarding screen resolution and bit rates, consider reducing the resolution of your screen before recording. This will result in larger easier to see text on the screen in your screencasts, with less wasted space on the screen, and smaller video files thereby requiring less Internet bandwidth/speed to deliver the video stream to the web browser.

Alternatively, you could use a screen zoom tool. There are good ones, like TechSmith Camtasia, that include everything you need and will automatically pane the screen to follow your mouse pointer when zoomed in.

Consider using a mouse pointer highlighter. This places a round circle (often seen in highlighter yellow) around the mouse pointer to make it easier to follow.

Screencasting Tools: If you can't afford to purchase Camtasia, here are a few free and inexpensive tools to help you record your screen like a pro:

  • Open Broadcaster Software (OBS) -- This free open source tool enables you to record and save or live streams from your desktop and other recorded and live video sources.
  • PointerFocus -- This is a low cost Mouse toolbox for presenters and trainers but works great for screencasters as well. In includes several tools such as mouse pointer highlighter, keystroke visualization, mouse spotlight (dims the rest of the screen), on-screen annotation pen, and screen magnifier. If you can't afford even this, take a look at PenAttention. Unlike the PointerFocus toolbox, this free tool only includes the mouse highlighter.
  • ZoomIt -- This free screen zoom and annotation tool makes application demonstrations even better. It even includes a break timer.

Notes for Responsive Web Design Frameworks

If you are putting the video in a narrow div on your page, keep in mind that the video will actually end up wider when viewed on mobile screens, where it will go full width can be up to 767px wide.

If you need to put a video in an even smaller space, consider creating an image linked to the actual video and display it in an inline lightbox instead.

Related Posts: