Click & Copy - AUDIO_VIDEO (General)

AUDIO&VIDEO - In General...

1. Audio

The most usual sound files have extensions as: *.WAV (windows Audio File), *.MID (Midi File) and *.MP3 (MP# File). The list of the most usual cases of applying sound in your page is the following:

- as a background sound (plays once or permanently while the page is opened);
- sound appears when an image or button is clicked;
- showing sound player start the play automatically or clicking on "Play" button.

In IE 4/5 and NN 4/5 the situations in case 1 was similar (not the same code) and very simple. You had to use <BODY> tag in IE as following:

<body bgsound="myFile.mid">
and in NN <EMBED> tag as following:
<EMBED SRC="myFile.mid" AUTOSTART=FALSE LOOP=FALSE WIDTH=145 HEIGHT=55 ALIGN="CENTER"></EMBED>

As for the case 2 you just could make similar script for both of browsers using <A> tag:

<A HREF="file:///C:/MyFolder/FileName.wav">Click To Listen!</A>

So, in the 6-th version situation became a little bit more complicated and to enable sound you have to put sound Plug-ins in your HTML code. The most general code looks like this:

============================================== HTML Code ============================================== // Insert Media Player for audio file document.writeln('<p align="center">'); document.writeln('<OBJECT ID="MediaPlayer1" width=200 height=50 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject">'); document.writeln('<PARAM NAME="AutoStart" VALUE="True">'); document.writeln('<PARAM NAME="FileName" VALUE="images/' + YourPath + 'YourFile.mid">'); document.writeln('<PARAM NAME="ShowControls" VALUE="True"><PARAM NAME="ShowStatusBar" VALUE="True">'); document.writeln('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="images/' + YourPath + 'YourFile.mid" name="MediaPlayer1" width="200" height="45" autostart="1" showcontrols="1">'); document.writeln('</OBJECT></p>'); ============================================== JavaScript Code ============================================== // Insert Media Player for audio file <p align="center"> <OBJECT ID="MediaPlayer1" width=200 height=50 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"> <PARAM NAME="AutoStart" VALUE="True"> <PARAM NAME="FileName" VALUE="YourPath/YourFile.mid"> <PARAM NAME="ShowControls" VALUE="True"><PARAM NAME="ShowStatusBar" VALUE="True"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="YourPath/YourFile.mid" name="MediaPlayer1" width="200" height="45" autostart="1" showcontrols="1"> </OBJECT></p> ==============================================

Explanations: if you understand all the attributes of the <EMBED> tag then you are able to regulate with them as you wish in all you particular cases.
- So SRC must have the complete path to the file location;
- width and height parameters will give you how big is the picture of the player on your page
   (make them both zero to hide it);
- DON'T change the plaginspage and name attributes!;
- the most important attributes are autostart and clicktoplay: if autostart is 0,
    then set clicktoplay to 1;
- with all the rest you can manipulate as you wish. For example autorewind means
    will the file be rewind back to the beginning after the end of it.

2. Video

The situation with video applications is very similar to the previous one. The most often files type for presentation are *.WMV (Windows Media Video), *.AVI (Windows Video File) and *.MOV (Move File very popular since this is the format in modern digital cameras). Here is the example for the first 2 file types for Windows Media Player from the Microsoft company:

<object id="Player" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" width="239" height="251"> <param name="FileName" value="YourFile.avi"> <param name="ShowControls" value="1"> <param name="ShowPositionControls" value="0"> <param name="ShowAudioControls" value="1"> <param name="ShowTracker" value="1"> <param name="ShowDisplay" value="0"> <param name="ShowStatusBar" value="1"> <param name="AutoSize" value="1"> <param name="ShowGotoBar" value="0"> <param name="ShowCaptioning" value="0"> <param name="AutoStart" value="1"> <param name="AnimationAtStart" value="0"> <param name="TransparentAtStart" value="0"> <param name="AllowScan" value="1"> <param name="EnableContextMenu" value="1"> <param name="ClickToPlay" value="0"> <param name="InvokeURLs" value="1"> <param name="DefaultFrame" value="_self">  <embed src="file:///C:/YourFile.avi" align="baseline" border="0" width="320" height="310" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin&" name="MediaPlayer" showcontrols="1" showpositioncontrols="0" showaudiocontrols="1" showtracker="1" showdisplay="0" showstatusbar="1" autosize="1" showgotobar="0" showcaptioning="0" autostart="1" autorewind="0" animationatstart="0" transparentatstart="0" allowscan="1" enablecontextmenu="1" clicktoplay="0" invokeurls="1" defaultframe="_self"> </object>

Since Windows Media Player do not support *.MOV files the plug-ins must be used from the Apple company for QuickTime player. The code looks like this:

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="245" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="FileName.MOV"> <PARAM name="AUTOPLAY" VALUE="true"> <PARAM name="CONTROLLER" VALUE="true"> <PARAM name="LOOP" VALUE="false"> <PARAM name="SCALE" VALUE="tofit"> <EMBED SRC="FileName.MOV" width="320" height="245" AUTOPLAY="true" SCALE="tofit" CONTROLLER="true" LOOP="false" pluginspage="http://www.apple.com/quicktime/download/"> </EMBED> </OBJECT>

Explanations: As you can see codes are very similar except that parameters' values in the first case are designated with "1" or "0" as Boolean but in the second one as "true" and "false". I am sure you'll be able to find similarity with audio code and make the necessary manipulations to fit your desire! That's why I do not provide any further explanations on this case :)

On the next pages you'll find examples how it is possible to use and manipulate with sound and video files. Enjoy it! Click&Copy the code from the pages! Make your Web sites more attractive to the potential users!

Back to

start page