Linking to Streaming Files in DukeStream Pro


QuickTime
Real
Windows Media
Linking to Live Streams

 

Embedding a Player into Cascade or other CMS's that use JavaScript

In order for the CMS to recognize certain HTML markup, you will need to disable JavaScript  in your browser.  Once the JavaScript  has been disabled you will be able to add the necessary code for embedding a player.  Once the page has been updated, enable the JavaScript and refresh the page.

QuickTime

Users who don't have QuickTime installed may find a link to download QuickTime helpful.
Sample text: If you do not have the Quicktime Player, you can download it free here: http://www.apple.com/quicktime/download/

Linking Option #1: External QuickTime player

You can create a link on your Web page that will open the external QuickTime player automatically and start playing your video. To do this, you must create what is called a "reference movie." (See Creating Reference Movies).  You can then upload your reference movie to any web space (not to your streaming folder in afs where your media files live as that space is NOT web accessible), and link to it there as in the following example:

 

The link above points to a reference movie named "servertest_ref.mov" on the OIT CMS in the same directory as this Web page.

Linking Option #2: Embedding the QuickTime player in a Web page Using a "Poster Movie"

The video below uses a Poster Movie (an image of your own choosing) to stand in for the actual QuickTime movie. This means that when users visit the page where your video appears, they will see an image instead of an empty player with the QuickTime logo.  When a viewer clicks on the Poster Movie, the Poster Movie disappears, revealing the embedded QuickTime Player with controls, and the video will begin streaming.


 

  1. Download these 3 script files, and save them to the folder on the web server where your HTML file is stored. Add the following code to your HTML page inside the <head> tag:

    <script src="AC_ActiveX.js" type="text/javascript"></script>
    <script src="AC_RunActiveContent.js" type="text/javascript"></script>
    <script type="text/JavaScript" src="AC_QuickTime.js" language="JavaScript"></script>

    Add the following code to your HTML page where you want the video to appear:

    <script language="JavaScript" type="text/javascript">
    QT_WriteOBJECT('poster_movie.mov','320','256','',
    'href','rtsp://quicktime.oit.duke.edu/its/servertest.mp4',
    'target','myself',
    'controller','false');
    </script>

  2. Change the pixel dimensions to match those of your video
  3. Point to your Poster Movie. This could be a relative or an absolute link. An absolute link to a file in your personal webspace would look like this: http://www.duke.edu/~NetID/yourPosterMovie.mov).  Note that poster movies can be .jpg files but that approach is not recommended if you want to maximize browser compatibility.  Instructions for creating a poster movies are here: http://www.oit.duke.edu/web-multimedia/multimedia/dukestream/poster_movies.html
  4. Enter the rtsp url of your live stream. You typically generate the .sdp file name in the encoding application when you set up your broadcast (usually in QuickTime Broadcaster)

 

Linking Option #3 Embedding QuickTime without the Poster Movie


  • First, you'll need to create a QuickTime Reference Movie to go with your video. If you need to, you can review OIT's instructions on creating reference files.
  • Save your Reference Movie to the same directory on the web server where your web page is stored.
  • Next, you'll need 3 script files, which you can download here.  Unzip and save these files to the folder on the server where your web page resides. Add the following code to your HTML page, inside the <head> tag:

    <script src="AC_ActiveX.js" type="text/javascript"></script>
    <script src="AC_RunActiveContent.js" type="text/javascript"></script>
    <script type="text/JavaScript" src="AC_QuickTime.js" language="JavaScript"></script>
  • Add the following code to the <body> of your HTML page where you'd like your video to appear:

<script language="JavaScript" type="text/JavaScript">
QT_WriteOBJECT("servertest_ref.mov", "320", "256", "",
"scale","tofit",
"autoplay", "false",
"emb#bgcolor", "white",
"align", "middle");
</script>

How do I modify this code to match my video?

line 2: Change pixel dimensions to match those of your video
line 2: Point to your Reference Movie--could be a relative or an absolute link. An absolute link to a file in your personal webspace would look like this: http://www.duke.edu/~NetID/yourReferenceMovie.mov). 

Real

Providing a link to the RealPlayer download site may be helpful for users who may not have RealPlayer installed.

Sample text: If you do not have RealPlayer, you can download it free here:
http://www.realnetworks.com/products/media_players.html

Linking Option #1: External RealPlayer

Linking to RealMedia files via the external Player is much easier than creating similar links via QuickTime. A sample link to a file in DukeStream calling the external RealPlayer looks like this:
http://realmedia.oit.duke.edu/ramgen/yourdirectoryname/anysubfolder/filename.rm

This process is so easy because Real automates the process of creating reference movies through the function you see referenced in the URL above called "ramgen." Like reference movies, ramgen translates between RTSP, the protocol used by streaming servers, and HTTP, the protocol used by Web servers. This allows you to type links into a Web browser that will reliably call up and play your file via a designated media player.

Linking Option #2: Embedding the RealPlayer in a Web Page


  1. Copy the following source code into your HTML page where you'd like your video to appear:

    <OBJECT id='rvocx' classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
    width="360" height="240">
    <param name='src' value="rtsp://realmedia.oit.duke.edu/its/servertest.rv">
    <param name='autostart' value="false">
    <param name='controls' value='imagewindow'>
    <param name='console' value='video'>
    <param name='loop' value="false">
    <EMBED src="rtsp://realmedia.oit.duke.edu/its/servertest.rv" width="360" height="240"
    loop="false" type='audio/x-pn-realaudio-plugin' controls='imagewindow' console='video' autostart="false"> </EMBED>
    </OBJECT>

    <OBJECT id='rvocx' classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
    width="360" height='30'>
    <param name='src' value="rtsp://realmedia.oit.duke.edu/its/servertest.rv">
    <param name='autostart' value="false">
    <param name='controls' value='ControlPanel'>
    <param name='console' value='video'>
    <EMBED src="rtsp://realmedia.oit.duke.edu/its/servertest.rv" width="360" height='30'
    controls='ControlPanel' type='audio/x-pn-realaudio-plugin' console='video' autostart="false"> </EMBED>
    </OBJECT>

  2. Modify the pixel dimensions of your video. Note that there are four places in the code where you'll need to specify this information.
  3. Modify the rtsp link and path to that of your video. Note that there are four places in the code where you'll need to specify this information.

 

Windows Media

Linking Option #1: External Windows Media Player

You can create a link on your Web page that will open the external Windows Media Player automatically and start playing your video. To do this, you must create what is called a "pointer file." To create a Windows Media pointer file, follow these steps:

  1. Open a text editor
  2. Copy & paste the metafile script into your text editor

    <ASX VERSION = "3.0">
    <ENTRY>
    <REF href="rtsp://windowsmedia.oit.duke.edu/its/Coral_Reef_Adventure_720.wmv"/>
    </ENTRY>
    </ASX>
  3. Change the rtsp url in the example above to the correct one for your video
  4. Save your file with the .wvx or .asx extension
  5. Double click the file to test if the metafile is working
  6. Once you've created your reference movie, you must upload it to your website with your web pages – not to your folder on the Windows Media server. The link on your Web page will point to the reference movie, as in the example below:

Click here to view Windows Media video in external player

The link above points to a reference movie named "wvx.wvx" on the OIT website..

Linking Option #2: Embedding WindowsMedia in a Web Page Using JavaScript


  1. Create a Pointer file to embed your WindowsMedia video. See Linking Option #1 above for instructions.
  2. JavaScript is required for cross-browser compatibility. You'll need two .js (JavaScript) files called AC_ActiveX.js and AC_RunActiveContent.js. You can get those files at: http://www.duke.edu/web/its/cms/DukeStream/scripts/ . Save these two JavaScript files to the folder on the web server where your HTML file is stored
  3. Add the following code to your HTML page, within the <head> tag:

    <script src="AC_ActiveX.js" type="text/javascript"></script>
    <script src="AC_RunActiveContent.js" type="text/javascript"></script>
  4. Next, add the following code to your HTML page where you want the video to appear:

    <script type="text/javascript">
    AC_AX_RunContent( 'width','500','height','315','classid','CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95','id','mediaplayer1','src','wvx.wvx','autostart','false','filename', 'wvx.wvx','showcontrols','True','showstatusbar', 'True','showdisplay','false','autorewind','True' );
    </script>

How do I modify this code to match my video?

Change pixel dimensions to match those of your video
Change wvx.wvx to the name of your poster movie. Note that this can be either a relative or an absolute link.

 

Return to top

 

Sample link to a reference movie:

Click here to view QuickTime video in external player