Embedding Media into a Text/Multimedia Content Item in eCollege
advertisement
Embedding Media into a Text/Multimedia Content Item in
eCollege
Before you embed your media into a text/multimedia content item, it will first be
necessary for you to upload your file to the streaming media folder. To do this, you
will complete the following steps:
Switch to Author Mode
Click on Course home
Select the File Manager Tab
In the “Select an Action” drop-down menu, select “Upload a File” and click Go.
A new form will appear. It will ask you to “select a folder in the folder tree to
the left.” Select the Streaming Media folder.
Under “File to Upload”, use the Browse button to find the media file on your
computer
Once you have selected your file, click on the “File Type” menu to select the
media type
Enter a description and comment on this file (optional)
Click Upload file
Now that you have uploaded the file to the streaming media folder, you will need to
determine the “source link” information (i.e., the location information for where this
file is being stored on eCollege’s servers). To determine this, complete the following
steps:
In Author Mode, click on your Text/Multimedia content item
Select the “Add a Link” button
A new window will appear. Under the “Select Type of Link” menu, select “Link
to a File or Document” and click Go.
Click on the “I have already uploaded the file” button
Enter a link text (something to the effect of “test” should be sufficient) and
select the file you previously uploaded to the streaming media folder. Click
“Add Link.”
The link will now appear in your text/multimedia box. In the Visual Text Editor
toolbar, select the button labeled <HTML> to change the Edit Mode.
Now you will see the media source link. It should appear something like this:
<A href="/ec/courses/12291/crs-trn01-2239864/media_name.mov"
target=new>test</A>
Copy the piece of this link that refers to the media source. This will be the
text that appears between the quotes. Referencing the example above:
<A href="/ec/courses/12291/crs-trn01-2239864/media_name.mov"
target=new>test</A>
Open a simple text file and paste this information
Now that you have the source information for your particular media file, you can
start using the embedded player codes. Return to your text/multimedia content item
and switch over to the <HTML> edit mode.
Use the following code for the QuickTime Player:
<P><EMBED pluginspage=http://www.apple.com/quicktime/
src=http://epmedia.ecollege.com/media/TCU/ABS-CIS2276746/Part_1.mov width=xxx height=xxx
type=video/quicktime autoplay="true" controller="true"
loop="false"> </EMBED></P>
or
<P><EMBED pluginspage=http://www.apple.com/quicktime/
src=http://epmedia.ecollege.com/media/TCU/ABS-CIS2276746/Part_1.mov type=video/quicktime autoplay="true"
controller="true" loop="false"> </EMBED></P>
The text in red refers to the source of your media file that is located in the streaming
media folder. Replace this text with the source link information that you pasted in
the text file. Also, adjust the coding piece that refers to width and height numbers
(in pixels) to match the dimensions of your source file. Click Save Changes and
switch over to the Course view to view your embedded media. Please note that it
may take a few moments for your file to load, depending on its size.
For Windows Media Player, repeat the same steps and use the following code:
<SCRIPT language=JavaScript>
var WMP7;
if ( navigator.appName != "Netscape" ){
WMP7 = new ActiveXObject('WMPlayer.OCX');
}
// Windows Media Player 7 Code
if ( WMP7 )
{
document.write ('<OBJECT ID=MediaPlayer ');
document.write (' CLASSID=CLSID:6BF52A52-394A-11D3-B15300C04F79FAA6');
document.write (' standby="Loading Microsoft Windows Media
Player components..."');
document.write (' TYPE="application/x-oleobject"
width="300" height="290">');
document.write ('<PARAM NAME="url"
VALUE="http://epmedia.ecollege.com/asxgen/media/TCU/ABSCIS-2276746/Part_1_(Windows_256).wmv">');
document.write ('<PARAM NAME="AutoStart" VALUE="true">');
document.write ('<PARAM NAME="ShowControls" VALUE="1">');
document.write ('<PARAM NAME="uiMode" VALUE="mini">');
document.write ('</OBJECT>');
}
// Windows Media Player 6.4 Code
else
{
//IE Code
document.write ('<OBJECT ID=MediaPlayer ');
document.write ('CLASSID=CLSID:22d6f312-b0f6-11d0-94ab0080c74c7e95 ');
document.write
('CODEBASE=http://activex.microsoft.com/activex/controls/mp
layer/en/nsmp2inf.cab#Version=6,4,5,715 ');
document.write ('standby="Loading Microsoft Windows Media
Player components..." ');
document.write ('TYPE="application/x-oleobject" width="300"
height="290">');
document.write ('<PARAM NAME="FileName"
VALUE="http://epmedia.ecollege.com/asxgen/media/TCU/ABSCIS-2276746/Part_1_(Windows_256).wmv">');
document.write ('<PARAM NAME="AutoStart" VALUE="true">');
document.write ('<PARAM NAME="ShowControls" VALUE="1">');
//Netscape code
document.write (' <Embed type="application/x-mplayer2"');
document.write ('
pluginspage="http://www.microsoft.com/windows/windowsmedia/
"');
document.write ('
filename="http://epmedia.ecollege.com/asxgen/media/TCU/ABSCIS-2276746/Part_1_(Windows_256).wmv"');
document.write (' src="http://ncnetshow/station1.asx"');
document.write (' Name=MediaPlayer');
document.write (' ShowControls=1');
document.write (' ShowDisplay=1');
document.write (' ShowStatusBar=1');
document.write (' width=290');
document.write (' height=320>');
document.write (' </embed>');
document.write ('</OBJECT>');
}
</SCRIPT>
Again, it will be necessary to replace the text in red with the source link information
that you pasted in the text file.
This code displays the player in Internet Explorer, Netscape, and Firefox browsers
(not Safari). In fact, in Safari, you can’t even use the Streaming Media Server at all.
This method of embedding the player involves creating JavaScript code that does a
document.write of the code you want.
Important Note:
Please keep in mind that when you embed a media player, the end user must have
that particular player installed on their computer. For example, if you embed a
QuickTime player to handle your media file… your end user must have that version of
the QuickTime player to listen. Its best practice to provide a link somewhere within
your course shell to a site where the student can download the media player that
you are using (i.e., www.apple.com, etc.)
Also keep in mind that it is much easier just to create a link to the media file in the
Streaming Media Folder. When you link to a file, they can use whatever program
(QuickTime, Windows Media Player, iTunes, Winamp, etc.) they have as their default
mp3 player.
So unless an instructor has a particular need to embed this player, this is the way to
go.
Procedure for Setting QuickTime Preferences for IE
In some instances, the default media player may not be set to QuickTime in a user’s
Internet Explorer browser. Although different media players can play different types
of files, it is possible for an error to occur that can prevent the user from properly
accessing the file.
To set QuickTime to be the default media player for a particular file type, please
follow this procedure:
1.
2.
3.
4.
Open the QuickTime player on your system.
Select Edit → Preference → QuickTime Preferences.
Select the File Types tab.
Check the file types you wish to associate with the QuickTime Player.
