Media Playback in HTML5
Dr Anton Gerdelan




Formats Overview

Ogg container file

Formats Overview contd.

mp4 (MPEG-4) container file

webm container file

Making a Website with Media. Problem?

  1. try to get the raw, uncompressed recording (lossy→lossy=nasty)
    • .raw or .wav file (not mp3 or ogg)
    • sequence of image files in camera's raw format
    • .jpeg is lossy so bad, but may be the best the camera can do
  2. load into a non-proprietary tool like Audacity or Avidemux so that you are not limited to WMV or QuickTime. Adobe Premier Pro (commercial), OpenShot (linux).
  3. best case scenario for video - numbered sequence of uncompressed images. "Import sequence" or drag into editor - it builds video (like making a GIF). Export.

Castle Thunder Exported From Audacity

Summary: HTML5 Media

Some Good Video Encoding Choices
containervideo codecaudio codec
ogg (Mozilla/Google/Opera)libtheoralibvorbis
WebM (HTML5; Mozilla, Opera, Google)libvpx (VP8)libvorbis
mp4 (Quicktime/Safari)libx264libfaac