image

Quicktime Notes for Teachers College

Current Status of the Quicktime Server

The venerable QuickTime server has been retired. No general community uploads are supported going forward. We recommend “File Share” on the Alfresco server for course and research group access and TC Google Drive for miscellaneous use. Special department or course use of the quicktime server is possible where the content must be fully public. Please apply to Academic Computing Services.

Quicktime HTML5 Authoring Notes:

Please use the current HTML5 video and audio tags for embedding multimedia in Teachers College course html content. Here is an example (adapted from the w3shools site):

<video width="320" height="240" controls poster="poster.jpg">
  <source src="movie.m4v" type="video/mp4">
  <source src="movie.mov">
  For non-HTML5 browsers, try clicking on <a href="movie.mov"> movie.mov </a>
</video>
  1. “Controls” – you must include the attribute “controls” if you want the controller to be visible. The alternative is to build your own javascript controller.
  2. “Poster” – gives you a still image to fill the black blank screen of the video starting up.
  3. “Height” and “width” – should be set to the full size of your video so as not to waste bandwidth.
  4. Text Content: – this is be visible if the video is unplayable by the client.
  5. Alternate sources – a modern quicktime file (sometimes called AVC, mp4 or H264) should be playable in all modern browsers now. WebM is a Google format that has good performance. Ogg is an open source codex that is fee of any licensing problems. If you provide multiple sources, the browser will try to pick the best supported format.

A Little More Complex…

Because the html content between the video tags is only visible to older browsers unable to view HTML5, you could put a link rather than just a dismissal.

<video width="320" height="240" controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
<a href="movie.mp4">
   <img src="poster.jpg"></img>
<p>Video download for xyz</p>
</a>
</video>

A Good Tutorial

A good tutorial is at html5rocks. It includes subtitltles in the vtt text format in the <track> element.

Mobile Considerations

We suggest that a maximum size of 640x360 at 600Kb/sec for cell phone playback. If you know that your users will be accessing the content on WiFi, then you might consider a data rate as high as 1 Mb/sec. Also many of our users have found that 480 x 272 at 900 Kb/sec for normal viewing is a reasonable compromise.

Streaming Video

We have experimented with segmenting video so it will stream from the S3 “quicktime” server and it works well for iOS (iPhone, iPad) and OS X (quicktime X) but not Windows machines which require a special server rather than post–production. You can download the segmenting tools from Apple or come see Academic Computing Services if you are Teachers College Community members.