Web site Design: Using Multimedia Multimedia file formats on the web Basic Multimedia application on the web –A simple page with sound and music –A simple page with video clips –Embedding video with the element –Including objects with the element Embedding and controlling WMP –Identifying WMP with ActiveX controls –Embedding WMP –Creating control buttons for WMP –The Windows Media Video (WMV) format Using plugins for multimedia applications –What are plugins? –The embed element –A page to play back movies using plugins

Using Multimedia Multimedia is one of the factors that makes Web browsing so impressive and popular on the Internet. To play back sound, video and movies on a Web browser would normally require add-on software such as a "Media Player" to achieve the multimedia playback action. Some popular media players are available on the Internet: Widows Media Player, RealPlayer for Real Networks, QuickTime Player from Apple and Java Player from Sun. Multimedia file formats on the web.

Basic Multimedia application on the web A simple page with sound and music Using anchor element and let your system handle all the sound and video play back. For example you can use click on me to play some sound

Example -SoundSound ex04-01.htm.txtSt {font-family:arial;font-size:18pt;color:#ffff00; font-weight:bold;background:#000088} A Simple Page To Play Sound Please Click The Pic To Play <img src="pic_glass.gif" alt="pic" width="150" height="120" /> <img src="pic_gun.gif" alt="pic" width="150" height="120" /> <img src="pic_music.gif" alt="pic" width="150" height="120" /> Broken Glass Gun Shot Midi Music

A simple page with video clips ex04-02.htm.txtSt {font-family:arial;font-size:18pt;color:#ffff00; font-weight:bold;background:#000088} A Simple Page To Play Video Clips Please Click The Pic To Play Video Logo Clip MPEG Video Clip Using anchor element will activate the media player as a separate application and may open another window. In many cases, the integrity of the page or page layout will be destroyed.

Embedding video with the element Microsoft has extended the capability of by introducing an additional attribute called dynsrc. This attribute is used to store the URL of the video and dedicate it for video playback. When used, it will replace the value assigned to the src attribute and use the value of dynsrc instead. ex04-03.htm.txtSt {font-family:arial;font-size:18pt;color:#ffff00; font-weight:bold;background:#000088} Embedding Video Within Image Element <img> The element can also be changed to img src = “test.jpg” dynsrc = “test.mpg”>

Including objects with the element is a element for all-purpose mechanism for generic object inclusion – –<object – data="logo_web.jpg" – type="image/jpeg" – width="350" height="250" > – To Use, you need to define the attributes data and type as this examplethis example

Embedding and controlling WMP Identifying WMP with ActiveX controls –In a Windows system, ActiveX controls are identified by a unique value called class identity (clsid). This value is stored in the system registry and can be found by using regedit. Embedding WMP –In the following example, element is used to assign a file for embed WMP to play

Embedding WMP - exmapleexmaple ex04-07.htm.txtSt {font-family:arial;font-size:18pt;font-weight:bold} Embedding Windows Media Player Inside A Web Page <object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" type="application/x-oleobject" id="MediaPlayer1" width="320" height="240">

Using Plugins for Multimedia applications What are plugins? –Plugins are small pieces of software which can be used to enhance the capability of a browser. –They were created by Netscape. –They are DLL files located in plugins folder. Differences between ActiveX and plugins –ActiveX work with programs, it need program to add functionality to the Web page –Plugins are designed to integrate more with browsers and work with data that a browser cannot handle. Plugins do not need CLSID value. To fully embed plays into a Web page, you need a more general embedding element -.

The embedding element - -exampleexample Embedding Audio Within A Web Page Using <embed> element, you can embed audio and/or music into your Web page. Also, by reducing the size of the media player, the player is similar to a button. <embed src="dvd02.mp3" autostart="false" width="50" height="25" type="audio/x-mp3" /> -- MPEG Layer 3 (MP3) Music <embed src="dvd.wav" autostart="false" width="50" height="25" type="audio/wav" /> -- Wav Music <embed src="mu_mid.mid" autostart="false" width="50" height="25" type="audio/midi" /> -- Midi Music

Including sound in a page Direct Link – Scream Console control – No console – Background – –Loop value could be negative, loop = -1 specifies that the audio clip should loop until users browse a different Web pages or click the browser’s stop button. Positive number, 0 and negative number. –Balance attributes specifies the balance between the left and right speakers – sound only from the left speaker – sound only from the right speaker. 0 – both.