You are here

Home › Policies › external policies ›

User Manual - Media Services

Overview

Liberal Arts ITS provides services allowing for the presentation of audio and video media via the web to many different kinds of clients. We support several file formats and encoding methods, and use both streaming and non-streaming (i.e., HTTP or "progressive download") delivery methods.

This documentation specifies the required media formats, encodings, and containers; describes our streaming and http delivery services; and indicates how to access the server and storage.

Please see below for recommendations on selecting HTTP vs streaming for the delivery of your media; recommended encoding standards, and how to best incorporate media in your websites.

Users of our media services, should already be familiar with our User Manual - File Services and User Manual - Web Services policies, as these documents serve as both prerequisites and complements to this documentation.

Service Level Agreement

Services

Liberal Arts ITS offers two options for the serving of media: either as straight HTTP (ie, HTML5 or progressive download), or as streaming (using our streaming services). Typically, large or use-restricted files are served from our streaming services, while smaller files without any use restrictions may be best presented via HTTP. See below for a more detailed discussion.

Liberal Arts ITS provides two streaming options: Adobe Flash Streaming Media Server or an implementation of Apple's Quicktime Streaming Server. Users are strongly encouraged to use the former, as our Quicktime implementation is legacy and deprecated. HTTP (HTML5 and progressive downloads) is handled by our Apache web server.

Streaming - Adobe Flash Streaming Media Server

  • Supported Containers - Flash FLV and FL4, M4V and MP4, and MP3
  • Supported Codecs - Flash FLV and H.264 for video, MP3 for audio

Streaming - Darwin Quicktime Streaming Server

  • Supported Containers - QuickTime file format
  • Supported Codecs - Any QuickTime MOV for video and mp3 for audio; Codecs are limited to what the QuickTime player or plugin will support. Plain mp3 files are NOT supported, you must wrap your mp3 in an MOV. H.264 is NOT supported.

HTTP - Apache

  • Supported Containers - limited to what user's browser or browser plugins will support
  • Supported Codecs - limited to what user's browser or browser plugins will support
  • Restricting Access - Access to Progressive download content can be limited via UT EID or custom user name/password combinations

Selecting Streaming vs. HTTP ("Progressive Download")

The LAITS media server permits all media content to be available via both Adobe Flash based streaming and more traditional HTTP delivery methods, according to your choice. There are times and situations where you will either prefer, or be forced to use, only one or the other. The following are guidelines and pros and cons for each method.

Streaming

  • Usually required for larger files, due to storage or bandwidth limitations.
  • Requires player or plugin support (ie, Flash or built-in support on an iPhone).
  • Requires specific playback code in the webpage.
  • File formats are limited.
  • Viewer is unable to easily download the content to their computer.
  • Supports larger file sizes and uses less memory.

HTTP

  • May require a plugin, depending upon the format (ie, Quicktime).
  • User may have to wait until the file is downloaded before playback begins.
  • May be used in a website with minimal extra code.
  • May open in a separate window from the browser.
  • File formats are only limited by the web browser, whatever plugins it supports, and what the user has installed on their computer.
  • Viewer may easily download the content to their computer.
  • May limit file size and resolution due to bandwidth and memory.

Exceptions

Portable devices are typically more limited in their ability to play media. Devices which only support HTML5 playback cannot play Flash streaming media. HTML5 browser implementations have no support for streaming protocols at present, though these implementations do fairly sophisticated progressive downloading (pseudo-streaming).

Media Servers

Liberal Arts ITS has one primary server that provides both HTTP and flash streaming media services. This server is named 'media' and will function on the following domains: * media.la.utexas.edu * media.laits.utexas.edu * media.coerll.utexas.edu

Note that many Flash-based players will refuse to access files that are located in a different domain. Be sure to use the matching domain for the media and non-media portions of your website.

Additionally, we have a separate server set up for the delivery of legacy quicktime content: * qt.la.utexas.edu *qt.laits.utexas.edu

Please see below for examples actual URLs that you would use in your webpages.

File Storage

The media server has been designed and optimized for the serving of audio and video media. Users are strongly discourage from using the the ''www'' or ''dev'' file shares for media storage. Rather, users are encouraged to use the ''media'' file share, regardless if they are using HTTP or streaming services.

Please see the [http://www.laits.utexas.edu/support/file-services file services] policy for instructions on how to access the Liberal Arts ITS file system.

Encoding, Codecs, and Containers

There are a multitude of available formats for media; the one you select will depend on your project requirements.

Most video software will select default values that are adequate for general usage, but may not be optimal for your particular situation. For example, what works well for standard web browsers, may not work well (or at all) on portable devices (such as an iPod or a smartphone).

Following are the "best practices" for the various situations
in which you'd want to use media. We also suggest you review An Overview of Audio & Video Transcoding and Transcoding Best Practices.

The following encoding guidelines are STRONGLY suggested: * Video - 500 kbps for lower quality, and no higher than 1000 kbps * Audio - 44.1 khz or 48 khz, although lower is fine * Frame rate - No more than 30 frames/second * Resolution - 320x240 is a good "smaller" size (480x270 for widescreen); larger than 640x480 may not play; Note that for H264, the width and height MUST both be multiples of 16. * Codecs - For video files use H264 with AAC audio. For audio files use MP3. * For Portable Use - If your media needs to be viewable on a portable device, then you MUST use "optimize for web use" if your encoding software provides it.

FLV

We recommend that you encode at 500 bps, audio at 44 khz or less (possibly as low 10 khz), with a resolution of 320x200.

An hour of video encoded with these settings, will result in a file 50 MB in size. Due to inefficiencies in FLV, the file may be up to twice as large (ie, 100 MB per hour of video).

MP4

We recommend that you encode as H.264 in an MP4 container, at 800 bps, audio at 44 khz, with a resolution of 480x270.

An hour of video encoded with these settings, will result in a file 450 MB in size, at standard compression. We will not support resolutions above 640x480, nor bps higher than 150 bps.

File Size

A good rule of thumb is that if you are not streaming, your file size should be as small as possible since the browser (and our servers) may cache the files and cause either your disk to get full or our servers to stall. It can also cause various problems with pausing or rewinding/forwarding playback as clients and servers struggle to push more bits than the connection is able to handle.

The following are some typical media/file sizes (h264 at 500kbps, with sizes are in megabytes):

  • 240x180 - About 2.75mb per minute
  • 320x240 - About 3mb per minute
  • 480x360 - About 3.5mb per minute
  • 640x480 - About 6mb per minute

When to stream: If your total file size will be larger than 40m, you should probably chose streaming over traditional HTTP.

NOTE: Anything larger than 640x480 will probably use too much bandwidth!

Inserting Media into your Websites

There are two possible URL paths for media, one using standard HTTP, and the other using RTMP which requires a Flash based player.

Unless otherwise indicated, all newly requested media projects will be:

  • accessible by both HTTP and RTMP
  • publicly accessible by anyone on the internet

Contact Liberal Arts ITS web development staff for more info if needed. Also, see the sections above for more info on which method/url you should use and their pros and cons. Note that you will need to specifically request that HTTP access be restricted.

Examples: * http://media.la(its).utexas.edu:8080/projectname/folder1/folder2/medianame.mp4 * rtmp://media.la(its).utexas.edu/projectname/folder1/folder2/medianame.mp4

Copyright and Fair Use Issues

It is your responsibility to determine what permission(s) you need in order to use any media content and, if necessary, to obtain such permission. Please review additional information on [http://www.copyright.gov/fls/fl102.html "fair use"].

If access to your content needs to be restricted in any way, you need to notify LAITS. Depending on if you are using streaming vs HTTP, we are able to restrict in various ways, including arbitrary usernames/passwords, EIDs, and possibly IP address range (campus only).

If you need to restrict the ability of users to download your content, you must use streaming and need to rquest that HTTP access should not be made available.

Media Players

The following media players are recommended and supported by Liberal Arts ITS. You may use other players, but they will not be supported by our technical staff.

  • HTML5 built-in support - this is currently limited, as HTML5 is not fully supported by all browsers or platforms. Additional details and recommendations regarding HTML5 can be found in this document.

  • [http://www.longtailvideo.com/players/jw-flv-player/ JW Flash Player] - a standard Flash-based video/audio player that has been used in many websites developed by Liberal Arts ITS. A licensed copy is available for use across the utexas.edu domain. It is able to support almost every file format and situation in which you'd want to use media. Please contact one of our media web developers for details on how to use this player, and how to upload your media files.

  • [http://flowplayer.org/ FlowPlayer] - another well supported and popular Flash-based player that has been used extensively in websites developed by [http://coerll.utexas.edu COERLL].

Using the Flash-based JW Player

The following example provides instructions for adding media of any of these formats--FLV, MP4, M4V, MP3, AAC, JPG, PNG and GIF--to your COLA departmental website, using the JW Flash Player.

This code can be used, with slight modification, on other Liberal Arts ITS hosted websites. Additionally, it provides an example of a graceful failover to alternate media types.

  • Add swfobject library to page head for non-Cascade pages (may require editing template):
<script language=“javascript” type=“text/javascript” 
  src=“http://www.laits.utexas.edu/media/cola/swfobject.js” 
</script>
  • Add detection function to body (this block of code will need to be run for each unique object ID):
<script type=“text/javascript” language=“javascript”>
  swfobject.registerObject(“XXX” ((unique object id)), 
  “7.0.0” ((minimum flash version required)), 
  “http://www.laits.utexas.edu/media/cola/expressInstall.swf”);
</script>
  • Add media object to body:
<!-- Licensed JWPlayer with SWFObject 2.2 as Flash version detection -->
<object data=“http://www.laits.utexas.edu/media/cola/player.swf” width=“#” 
  height=“#” id=“XXX” type=“application/x-shockwave-flash” >
<param name=“movie” value=“http://www.laits.utexas.edu/media/cola/player.swf”/ >
<!-- to work in IE -->
<param name=“allowScriptAccess” value=“sameDomain”/>
<param name=“bgcolor” value=“#FFFFFF” />
<param name=“quality” value=“best” />
<param name=“FlashVars” 
  value=“file=http://full/url/path/to/media.mp4&autostart=false&frontcolor=675C56&lightcolor=403732&screencolor=EEE6E0” />
<!-- HTML5 failover if not Flash -->
  <video src="http://full/url/path/to/media.mp4" controls>
<!-- link to media failover if no Flash and no HTML5 -->  
    <a href="http://full/url/path/to/media.mp4" title="Link to media">Link to media</a>
  </video>
</object>
  • Add pre-load image to player by adding the path of image to flashvars value:
&image=http://full/url/path/to/image.jpg
  • Add captions to video by adding the path of caption xml file and plugin reference to flashvars value:
&captions.file=http://full/url/path/to/caption.xml&plugins=captions-1
  • Add playlist to player, by replacing the file source with playlist source (many formats are supported, including XML ATOM feed) and select location of playlist (right, over, bottom, none); note that object size includes playlist:
<param name=“FlashVars” 
  value=“file=http://full/url/path/to/playlist.xml&playlist=right&

Using Handbrake to Encode Your Media

Handbrake is a very popular, open source, package for encoding and transcoding many different media formats. You can download the [http://handbrake.fr/downloads.php regular GUI version] or [http://handbrake.fr/downloads2.php CLI (command line interface version)].

COERLL has successfully used the the following settings to encode video for use on iPhones, iPads, and Android based devices.

HandBrake GUI to encode single/queued videos

The downside of this technique is it requires you to encode videos one by one.

On the VIDEO Tab, select: * IMPORTANT!! Web Optimized needs to be enabled (select check box) * Preset: Normal * Format: MP4 * Video Codec: H.264 (x264) * Rest can be customized to your need

Handbrake CLI

Used for batch encoding files in a specific folder on your local computer.

Once Handbrake and HandBrake CLI are installed, run the following code from the command line (replacing the /local_path/ with your local path and /mov /mp4 with your source and target video folder.

for file in $(ls /local_path/mov/); do /Applications/HandBrakeCLI -v \\
  -i /local_path/mov/${file} \\
  -o /local_path/mov/mp4/"${file%.mov}.mp4" -Z Normal -O; done

Flags set: * Preset: -Z Normal * Web Optimized: -O

external
Taxonomy upgrade extras: 
external