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>
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>
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>
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>
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>
