Media Playback in HTML5
Dr Anton Gerdelan gerdela@scss.tcd.ie

Previously

• Embed entire media file. Play with media player plug-ins. Chug chug chug...
• Streaming with proprietary tech like flash e.g. youtube

HTML5

• Finally has audio and video tags for streaming
• Browsers supply controls/media player (no plug-ins)
• Can manipulate more precisely via JavaScript
• Some issues with formats across browsers
• Mozilla examples: https://developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video

Example

• video tag with controls attribute
• added 2 file sources to support FF/Chrome/Safari/etc.
• any other browsers get the "sorry" message

Formats Overview

• container file holds audio and/or video data
• data is encoded and decoded in one of several alternative formats (codec)
• codec can be lossless (compressed without losing any data)
• or lossy (smaller files, but less-important data is lost)
• browsers have several codecs, but they are not consistent

Ogg container file

• Commonly used Theora (lossy video), vorbis (lossy audio - like mp3) or FLAC (lossless audio).
• Better quality than mp3 and avoids licence issues
• Most browsers (not Apple or Microsoft)

Formats Overview contd.

mp4 (MPEG-4) container file

• Commonly used H.264 video (high quality lossy) and FAAC (audio)
• Apple and some others

webm container file

• Commonly used VP8 video and vorbis (audio)
• HTML5 standard. Not Apple or Microsoft

Making a Website with Media. Problem?

• how do we encode video/audio in 2 different formats?

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

• Try leaving out the ogg on Firefox or the mp4 on Safari

• Video is a bit trickier because you need to specify video and audio codecs for each file, and they need to match up to the container
• also need to select a frame rate that matches your capture rate. commonly 29.7 Hz or 25 Hz

Summary: HTML5 Media

• Streaming without Flash. No plug-ins. Controls and codecs in browser.
• Some file format issues with cross-browser support
• Some assembly required (but fun)
• Can use JavaScript to edit playback (see Mozilla dev network page)
• reminder: poll about coursework progress/difficulty