Webwork
/
Embedding Media

Adding video and audio content to Web pages will be much easier when HTML5 is more fully supported. In the meantime, some awkward coding is necessary to support as many platforms, browsers, devices and filetypes as possible.

Visible Audio Player

Source:
<object width="200" height="42">
<param name="src" value="bright-side-of-life.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#ffffff">
<embed src="bright-side-of-life.mp3"
autostart="false"
loop="false"
width="200"
height="42"
controller="true"
bgcolor="#ffffff"></embed>
</object>
Web page:

Invisible Audio Player

Source:
<object width="200" height="42">
<param name="src" value="galaxy-song.mp3">
<param name="autoplay" value="tr ue">
<param name="controller" value="false">
<param name="bgcolor" value="#ffffff">
<embed src="galaxy-song.mp3"
autostart="tr ue"
loop="false"
width="200"
height="42"
controller="false"
bgcolor="#ffffff"></embed>
</object>
Web page:
Changing both occurrences of "tr ue" to "true" in the code to the left will create an invisible player that plays when the page loads. Since unwanted/unexpected Web page audio is nearly universally hated, this is not a good idea unless the viewer has some reason to expect it.

Video Player

Video is even more complicated than audio. For a long time Flash video players were the solution to the problem and widely adopted by sites like YouTube, Vimeo, etc. Then the iPad and iPhone came along and Flash players (and Flash itself) became inadequate. As with audio, HTML5 will make placing video in Web pages much easier but HTML5 support is not universal yet.

w3schools has a nice summation of the problems of embedding video here.

Source:
<video width="480" height="300" controls="controls">
<source src="PlayboyLeavesChicago.mp4" type="video/mp4" />
<source src="PlayboyLeavesChicago.ogv" type="video/ogg" />
<source src="PlayboyLeavesChicago.webm" type="video/webm" />
<object data="PlayboyLeavesChicago.mp4" width="480" height="300">
<embed src="PlayboyLeavesChicago.swf"
width="480"
height="300">
Your browser does not support video.
</embed>
</object>
</video>
Web page:

The code above illustrates that, in order to cover all browsers presently in wide use, it's necessary to save videos in .mp4, .ogg, .webm and .swf (Flash) formats and use code that plays whichever format the user can support.

YouTube Video Player

A widely-used alternative to this is to upload your video to YouTube and use YouTube's embedding code which will determine what kind of video to serve based on browser, platform and plug-ins available:

Source (new YouTube embed code - HTML5 or Flash):
<iframe width="420" height="315" src="http://www.youtube.com/embed/416o9b_pjQk" frameborder="0" allowfullscreen></iframe>
Web page:
Source (old YouTube embed code - Flash only):
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/416o9b_pjQk?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/416o9b_pjQk?version=3&hl=en_US" type="application/x-shockwave-flash"
width="420"
height="315"
allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
Web page:

Flash Embed

Source:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8- »
444553540000" width="300" height="350">
<param name="movie" value="2005.swf" />
<object type="application/x-shockwave-flash"- »
data="2005.swf" width="300" height="350">
<p>Alternative content</p>
</object>
</object>
Web page:
Click to play »
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com