Week 9: Embedding Time-Based Media Files

This week: time-based media and HTML. We’ll be covering everything needed for the video and sound part of your final assignment – Time Lapse Video techniques, sound and video compression – and below, how to publish these files within your webpages.

There are 3 main ways to display media files within a web page.

Method 1: Direct linking to a media file.

1. Upload your media file to a server. Noting the location on the server, figure out the URL for this file.
2. Enter the full URL in a browser. If pointed to the address of a media file stored online, a web browser will play back the file in the centre of a blank web page. eg the link below:
http://raws.adc.rmit.edu.au/~e56720/video/timelapsebikeridetest.mov

That same URL can be used with hyper-linked text (eg my time lapse video file ), to take viewers to a separate page with the media file.

Method 2: Using Files Hosted at Online Services

Most media hosting services such as Youtube, Vimeo and Soundcloud etc will give you embedding code for a file, which can then be placed within the body of your HTML page. While this allows positioning of the media file (instead of having it centred in an empty page), it still limits control over playback of the media file, and limits the look of the media player.

Method 3: DIY Embedding Codes

The most flexible, customisable option for embedding media files – is only a couple of steps more difficult than the other 2 options above, but through learning this method, we gain the capacity to play sounds in the background (by setting the values of the player visibility), add the ability to loop playback, design the look of the media player, and several other functions.

What Code Do We Need for Embedding Media Files?
W3Schools outlines the structure and syntax of HTML, and explains the relevance of elements within that structure. For embedding time-based media files, we are interested in the Object Element which ‘supports many different media types, like Picture, Sounds, Videos and other multimedia Objects’.

Below is a HTML page with a table in it, and the code for a video file embedded within that table. This allows control of where the video player is located on the page. Use the browser menu to view the source code for the page.

http://raws.adc.rmit.edu.au/~e56720/video_example.html

Having viewed the code, note there are two options for generating the relevant codes for embedding time-based media files within webpages.
1. PageOT is free software ( mac + PC ), that “an immediate access to the complex features of QuickTime plug-ins, and gives you the power to create interactive playlists and presentations.” (If installing PAGEOT in the mac lab, install into a folder on the desktop, as you don’t have permission to install into the applications folder)

2. A web based generator of embedding CODE for embedding ]

For both processes, you will need to enter the URL of your media file, choose various settings, then collect the relevant code outputted, and then place this within your HTML page.

And some context for the near future of web publishing – HTML 5 – audio and video:
“HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers continue to add new HTML5 features to their latest versions.”