Notes on Adding Audio and Video to Web Pages
L. G. Piper BHCC 6 April 2011 Back in the Dark Ages— about five years ago
CMT111—Audio/Video—6April11 — 2 Most people didn’t have broadband connections – computers too slow to download audio and video in real time – so people shared audio and video files differently • download while you’re doing something else • view/listen in application on your computer
Audio and Video files came in a complex array of formats – people needed to convert from one to another – proprietary formats tried to resist such conversion • Windoz people couldn’t read Mac files and vice versa
Some formats eventually won out and using most others is a waste of time Audio 101
CMT111—Audio/Video—6April11 — 3 Only two or three audio formats worth one’s time
.mp3 – The standard form for music files – this is what’s on your iPod and what you get from iTunes
.midi – created by music synthesizers – limited, but easy to create from sheet music – …or from which to create sheet music
.wav – basically an unprocessed (or little processed) sound file – maintains (most) of fidelity when copied from vinyl records – My son and I convert old tapes and records to .wav, and from there to .mp3 Common Sound File Formats on the Web
CMT111—Audio/Video—6April11 — 4 Only three Format Description AIFF/ AIFC Audio Interchange File Format. AIFF was developed by Apple for use on the worthwhile Macintosh operating system. AIFF sound files can be either 8 bit or 16 bit, can be mono – .mp3 or stereo, and can be recorded at several different sampling rates. AU Also called mlaw ( mu- law) format. One of the oldest sound formats, it is primarily used – .midi on UNIX workstations. AU sound files have 8- bit sample resolutions, use a sampling rate of 8 kHz, and are recorded in mono. – .wav MIDI Musical Instrument Digital Interface. MIDI files cannot be used for general sound recording, like other sound formats, but are limited to synthesizers and music files. The A new format MIDI format represents sound by recording each note’s pitch, length, and volume. MIDI may come files tend to be much smaller in size than other sound formats. MP3 The most popular format for downloading and storing music, MP3 compresses sound into play in files to roughly one-tenth the size of uncompressed files while maintaining good audio the future quality. RealAudio A [formerly] popular sound format on the Web, RealAudio files are designed for real-time – .ogg playing over low- to high-bandwidth connections. RealAudio files tend to be much smaller than AU or WAV files, but the sound quality is usually not as good.
SND The SND format is used primarily on the Macintosh operating system for creating system sounds. This format is not widely supported on the Web.
WAV WAV is the standard audio format for Windows PCs and is commonly used for storing uncompressed CD-quality sound files. In its uncompressed format, a WAV file will require about 10 megabytes per minute of sound; however, compression algorithms are available to reduce the file size.
WMA Windows Media Audio is a proprietary audio format developed by Microsoft to compete with MP3s, offering near or better levels of compression than MP3s. Browser Plug-ins
CMT111—Audio/Video—6April11 — 5 Most browsers play audio and video by way of “plug-ins” – bits of code added to browser
Need different plug-ins to play the different formats – Most plug-ins will play .mp3 and .midi
My browsers all seem to have Quicktime and Flash plug-ins installed through no effort on my part – Then things work automagically…most of the time
Avoid RealPlayer, it’s intrusive crap Audio Format Mime types
CMT111—Audio/Video—6April11 — 6
Audio Format Mime types
Need to know mime type Format File MIME Type to tell browser which Extension plug-in to use AIFC aifc audio/x-aiff AIFF aif audio/x-aiff AIFF aiff audio/x-aiff Put the mime type inside AU au audio/basic the tags as an attribute, MIDI mid audio/mid for example, for mp3 use MIDI rmi audio/mid type=“audio/mpeg” MP3 mp3 audio/mpeg MP3 mp3 audio/x-mpeg RealAudio ra audio/x-pn-realaudio RealAudio ram audio/x-pn-realaudio SND snd audio/basic WAV wav audio/wav WAV wav audio/x-wav Four (or Five) Ways to Put Audio on a Web Page
CMT111—Audio/Video—6April11 — 7 1. Provide a link to the media file 1. in most browsers, clicking on the link will cause the file to play 2. some browsers just offer you an option to download the file
2. embed media file in
3. embed media file inside
4. embed media file inside
5. Can also embed a flash audio player you or someone else made Linking to the File
CMT111—Audio/Video—6April11 — 8 Just put up a standard link – might want to add a mime type, but generally not necessary
Works for most important file types – .mp3 – .midi – .wav
On my computer spawns Quicktime player plug-in
Example: Summertime Blues
Easy-peasy, huh? Using the
CMT111—Audio/Video—6April11 — 9 This is the official method – Works great in Opera, Chrome, Safari – mostly works in FireFox – Does not work in IE6 – sometimes ok in IE8
You can extend to formats other than .mp3, .midi, and .wav by using Windoz active-x (but I don’t see the point—I don’t trust active-x)
Example Using the
CMT111—Audio/Video—6April11 — 10 This seems to be what people actually do – makes .mp3, .midi, and .wav work in IE6 too – still some issues with FireFox
Technically, one shouldn’t use this: it’s been deprecated – BUT…it will become un-depracated with HTML 5 – Why fight city hall?
Example:
Some people nest
CMT111—Audio/Video—6April11 — 11 This is the wave of the future: added to the HTML 5 specification
Currently works, for .mp3, .wav and .ogg in Chrome, Safari, and FireFox – only .wav and .ogg files in Opera and FireFox – only .mp3 and .ogg files in Safari
Allegedly will work in IE9 – BUT…IE9 won’t work on WinXP (>50% of Win comps in Feb 2011)
Example: You Can Also Embed a Flash Player
CMT111—Audio/Video—6April11 — 12 Available from several places on Web
Example is the “Google Reader” player – http://sites.google.com/site/mori79/html-gadgets/media-players/google-reader- player
Paste in the code
change audio url to the one of your choice – I only got this to work from web-based url – should work with local host, but quick try failed. I need to investigate further Audio Formats and Methods Supported By Various Browsers
CMT111—Audio/Video—6April11 — 13 Format Method Browsers
CMT111—Audio/Video—6April11 — 14 Many folks will wrap
CMT111—Audio/Video—6April11 — 15 You may need to do some special conditional comments when you do tag wrapping comment out conditional comment. The comment logic IE will still see if browser is not IE comment and ignore block do some stuff end of the if statement if the browser is IE see it. Only IE understands these comments, so other browsers ignore them These are very difficult to get to work correctly – and I’m still trying… Video
CMT111—Audio/Video—6April11 — 16 As with audio, there is a plethora of file formats, most of which can be ignored – stick with .mpeg, .mov, and flash-based video
Same options for placing on your web page – plain link and let them figure it out –
Format Filename MIME Type DescriptionCMT111—Audio/Video—6April11 — 17 Extension AVI .avi video/x-msvideo Audio/Video Interleaved. AVI is a common video file format developed by Microsoft for use with Windows. It is not always possible to play AVI files on non- Windows computers unless special software has been installed on the computer. Flash .flv video/x-flv FLV is a proprietary file format developed by Adobe to deliver video over the Video Internet using the popular Adobe Flash Player. It is the preferred file format for online video sites such as YouTube and Google Video. MPEG .mpg video/mpeg Moving Pictures Group. The MPEG format allows for high compression of the .mpeg video file, resulting in a smaller file size. MPEG files have good support across .mp3 various browsers and operating systems but tend to be much larger than flash videos. QuickTime . mov video/quicktime QuickTime is a video format developed by Apple Computer for Windows and Apple computers. Like MPEG, QuickTime employs a compression algorithm that can result in smaller file sizes. QuickTime files require QuickTime Player, available for either Windows or the Macintosh. RealVideo .rm application/vnd.rn RealVideo is a video format developed by RealNetworks for transmitting live .rv -realmedia video over the Internet at both low and high bandwidths. It uses a variety of data compression techniques and requires the installation of the RealPlayer media player. Shockwave .swf application/x- SWF is a proprietary file format developed by Adobe to deliver multimedia and Flash shockwave-flash vector graphics on the Web. An SWF file can contain animations, video, audio, interactive scripts, and control buttons. SWF files can be played using Adobe Flash Player either as a browser plug-in or a stand-alone player. Windows .wmv video/x-ms-wmv Developed by Microsoft, WMV is a popular video format for creating streaming Media video on the Web. The WMV format offers good compression and video quality, but is primarily designed for Windows users. Using the
CMT111—Audio/Video—6April11 — 18 Pretty much the same as for audio –
Example
CMT111—Audio/Video—6April11 — 19 Pretty much the same as for audio –
Example
Asashoryu vs. Mushashimaru at Aki 2001
CMT111—Audio/Video—6April11 — 20
I could get .wmv to work only in IE and only via
I couldn’t get anything to work with the
CMT111—Audio/Video—6April11 — 21 Flash is what is used on YouTube
You can, however, make your own flash player, or find one on the web and embed it similarly to the other formats
Example (awesome guitarist for Angry Hill):
CMT111—Audio/Video—6April11 — 22 The flash player in the demo was specialized and needs a number of “controller” files present in the player folder
You can get a more generic flash player on the web – http://www.longtailvideo.com/players/jw-flv-player/ – JW Player isn’t non-trivial to configure – doesn’t appear to work with local testing – more limited than they admit in supported A/V formats – Does, however, work quite well, once up and running • e.g. http://docpiper.com/jwplayer/jwPlayerTest.html Homework this Week
CMT111—Audio/Video—6April11 — 23 Your homework this week is to make a web page or two that have audio and video embedded
You choose the audio and video files—surprise me
You must do video by some means other than pasting YouTube code into your page. That is make up your own tag and get it to work.
I’ll be around off and on for questions (not Thursday) – but basically, you can copy code from the examples in this set of notes and just change the name and location of your audio/video files Forcing a Media Player in IE
CMT111—Audio/Video—6April11 — 24 IE would like you to tell it which browser plug in to use – this uses ActiveX technology embedded in Windoz system – if you do,
CMT111—Audio/Video—6April11 — 25 Flash Shockwave player class id D27CDB6E-AE6D-11cf-96B8-444553540000 codebase http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0
QuickTime player class id 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B codebase http://www.apple.com/qtactivex/qtplugin.cab
RealAudio player class id CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA codebase none
Windows Media Player class id 6BF52A52-394A-11d3-B153-00C04F79FAA6 codebase http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715
Java class id 8AD9C840-044E-11D1-B3E9-00805F499D93 codebase http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab