Custom Embedding Audio + Video

How can sound and image work together on the web? That’s what we’re exploring this week, drawing inspiration from cinema, television and art practices as we go. A good understanding of the technical possibilities will enable us to explore creative options more easily. ( Questions? How can we include background atmospheric sounds without a play controller? How can we allow sounds to continue between links / edits within our site as viewers wander? How can scrolling, off screen sound and Left-right panning be utilised creatively? How can the viewer control volume or mixes of sounds? etc etc )

If you have media files hosted at youtube / vimeo / / soundcloud etc – it’s a fairly trivial affair to embed media – just cut and paste the embed code from those sites. But what about sound or video hosted on your own server? And what other technical possibilities exist?

There is a similar process and a similar number of steps, for embedding sound or video, as there is for embedding images on a webpage :
1. upload your image ( or sound / video ) to an online location. ( This means your media file now has a URL )
2. Create code which states where this media file exists, and describes how the browser should display it
3. Finish the code on your html page, upload, and test in browser.

For  images, that end code would look something like this :
<img src=”; alt=”” />

which would display this :
monkey image

The process is the same for audio and video, though the extra complications of time based media mean the code is slightly more complex. We’ll look at this shortly. Before we upload, first we must ensure everything is suitably compressed for the web.

Codecs + Compression
One minute of video from SD video camera = around 250 megabytes per minute or 13 gigabytes per hour ( using the DV-PAL codec).
One minute of CD quality sound = 10mb.

Our media devices, bandwidth and file sizes will change over time, but the need for compression will remain the same. The beginning part of the production process has us recording at the highest possible resolution, quality and file sizes, so we can manipulate our recordings as best as possible. At the tail end of the production process however, we need to adapt our output for where it is being delivered – trying to find a balance between best quality and file size / cost technical limitations etc ( for pamphlets / videos on phones / CD or DVD mastering / or yes.. the web ). When we master audio or video for the web, we do so for two reasons: to give our audience the files in the shortest time – and because bandwidth costs money. The balance sought is best quality and smallest file size. We find this balance using compression codecs.

“A codec (which stands for compression-decompression) is a software module that contains algorithms used by encoding or playback software to encode or decode video and/or audio information.” ( From the EngageMedia guide to digital media )

Compressing Audio For The Web
mp3 if by far the dominant audio codec used online. An uncompressed 16 bit 44khz wave format(.wav) will be aproximately 10 megabytes per minute. If compressed into 128Kbps mp3, it will reduce to 1mb per minute. Most audio software will have mp3 exporting options. If not, this can be achieved with itunes. Import your track into itunes, and check that your itunes exporting preferences are set to mp3. Then open your audio file in iTunes, and under the ‘advanced’ pull down menu, select ‘convert selection to mp3′. iTunes will then convert your file to an mp3 – but it doesn’t provide any indication of where it has export this file. The preferences / settings should show where it has been exported – or ‘Right click’ on your mp3 file in iTunes and select ‘Show Song File’. Note the file size of your new mp3 compared to your original, and listen for any quality differences.

Creating the Audio Embedding Code:
Create an audio folder on your server with fugu / fetch etc, and upload your mp3 into it, note URL of audio.
Test this in the browser : eg
If correct, this should play your sound.

Insert audio URL into PageOt to generate code, ( note – make height=0, so you get a controller without a blank video window) insert this in a HTML page made in PageSpinner, include links for any sourced material. ) Width can be adjusted to make the controller suit the width of page design elements. Clicking controller on/off will have it display or not, and loop and volume allow further controls. Press ‘code and options’, paste this into a HTML page, upload – and bingo!

[ A web based alternative to PageOt for generating CODE for embedding is here ]

Hidden / background sound? Use with caution – users do not like sounds that cannot be turned off. This can be achieved by choosing the option to not display the controller.

See W3Schools link on sound formats, W3Schools link on ‘Playing sounds on the web‘, and Seth’s excellent notes on audio in webpages.

Compressing Video For The Web
Video is a little more complicated. In addition to adjusting the quality ( of the image in this case ), we also have different frame sizes. A general convention for web videos is 320 x 240 pixels. Digital PAL video from handicams is 720 x 576 pixels, and HD video can be either 1280×720 or 1920×1080. Secondly we have the frame rate – which can be 15fps / 24 or 25 fps or 29.97fps – or 50/60 fps on various cameras that can shoot faster ( for slowing down footage smoothly later ). Obviously a video that shows images which are 1920×1080 pixels, 50 times per second, will be a much, much larger file than a 320×240 pixels video, displaying images 15 times per second. ( Anything below 12 fps is no longer perceived as smooth motion to the eye, but becomes a stilted type of animation ). A current popular video codec is H264 – which gives a good balance of quality image and small file size. It does however need greater computing power to ‘decompress’, and is better suited to newer computers.

Creating the Video Embedding Code:
Export video as appropriate codec, size, frame rate.
( Guide to compressing with h264 )
Upload audio using fugu, note URL of video, insert video URL into PageOt to generate code. Insert this in a HTML page made in PageSpinner, include links for any sourced material. Experiment with Page Ot menu options for looped playback etc.

Example video in HTML pages ( view page source in web browser to see differences in code & tags for each example ).
A basic link to a video file, will display it in the centre of a grey page.
Using the embed and object tags allows us to control placement of the video in a page. Sample video inside a table.
2 Videos side by side, one without a controller.
2 videos, one with a poster movie, which means it only loads when played.

What Are Poster Movies?
-Each time a page with a custom embedded video is opened, it launches the video to play. If the movie is large, or you have several movies embedded on the one page this can cause bandwidth problems. Poster movies are a solution to this, being one-frame reference movies ( eg a still-shot or title from your movie ), which are very quick to load. The idea here is that the one-frame movie loads fast, and when clicked upon, loads the full movie ( which it references ).

To do this then, you first need to make a one-frame movie which will reference the movie you want played. Example poster movie ( & how-to / code) from Adrian Miles. See also Apple on ‘poster movies’. Seth explains how to use ‘poster movies’, & why they are useful.

Alternately, you can select autoplay=”false” ( rather than “true” as shown above ).

Tips for shooting better online video. eg
“For online video, avoid pans (horizontal movement of the camera) and zooms (focusing in or out using the zoom feature on the camera) because not only does it look bad on the Internet, but unnecessary movement also slows down the video stream.”

Quicktime Tips
Quicktime has a few useful audio editing, composition and exporting functions.

The in/out markers ( press i or o while a movie plays ) underneath the timeline can be used for quick and easy cutting and pasting ( apple + x / apple + c / apple + v ). ‘Apple + n’ will make a new quicktime document you can paste sounds into. Sounds can also be layered to play simultaneously, by using quicktimes ‘add to movie’ function, found under the ‘edit’ drop down menu. Selecting ‘add to movie and scale’ will re-adjust the pasted item’s length of time to match the time of where it is being pasted – as set out by the in and out markers. This can be useful for matching times, or speeding / slowing / changing pitch of sounds.

Under the QT file menu choosing ‘view’ then ‘play selection only (Apple + T) makes quicktime play only the section within the markers – which is useful for fine tuning an edit, and choosing ‘view’ then loop (Apple + L) makes the clip play in a continuous loop – both of these in combination can be useful for narrowing a sound down.

When a soundtrack is ready, choose file – export – then from pop-up window, select ’sound to aiff’.

Explorations for Later
How to custom embed within blog posts… there are unfortunately some extra considerations for the embedding audio and video code within blogs.
Links for creating podcasts / subscribable audio. (Just as an RSS reader enables audience loyalty, podcasts too can help facilitate consistent audiences over time.. )


One Response to “Custom Embedding Audio + Video”

  1. Custom Embedding Audio and Video « make + create + interwebs Says:

    […] Embedding Audio and Video Sean has done an in-depth post about tips and tricks for embedding audio and video into your HTML pages – how to compress […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: