The components of the player, the file structure, the setups, known bugs, and the bug reporting tools will be explained in detail in this documentation.


Generic Video Player Diagram

Generic Video Player

Generic Video Player Diagram

Developer's Panel

Generic Video Player Developer's Panel

  1. Play button - click to play the video. Only clickable when the video is paused.
  2. Pause button - click to pause the video. Only clickable when the video is playing.
  3. Timecode - displays the current progressing time and total duration.
  4. Current progress bar - indicates the current video progression.
  5. Progress bar thumb - indicates the current video progression. Drag and drop to scrub the video timeline.
  6. Progress bar - video progression bar.
    Note: Hovering anywhere on the progress bar will display a timecode where the video will seek to when clicked. Click anywhere on the progress bar to seek in addition to dragging and droping the progress bar thumb.
  7. Mute and unmute button - click to mute the volume. Click again to unmute.
  8. Volume ajustment control - will show up when hovering over the mute button and allows the video volume to be adjusted.
  9. Caption button - click to show caption. Click again to turn off caption.
  10. Full screen button - click to go to full screen mode. Click again (or press the ESC key on the keyboard) to go back to normal mode.
  11. Caption area - caption will show up here. It will slide up or down, depends on the playback controls.
  12. Developer's Panel - display all the technical stuff about the player and the video that is currently playing.
  13. Player Activities - display area for the information about the player and the video.
  14. Close button - click to close the Developer's Panel.
  15. Scroll pane - scroll the play activities information.

File Structure

Mediastreamer (formerly webstreamer)

Mediastreamer File Structure


Flashstreamer File Structure

The Generic Video Player (GVP) is centralized. Thus no need to worry about where it should go in the directory. No HTML file or the index page is required since the player will be hosted in D2L. However, in the directory root level, four files are needed. Those files are the caption file, main video file, poster image file, and the MP3 audio file.

  • Caption file - the caption file must be in "...cpt.xml" format.
  • Main video file - the video file must be in MP4 or FLV format. This is the same video file for the Flashstreamer server as well.
  • NOTE If an intro video is required, it must be in the same format as the main video.
  • Poster image file - the image file that will show up when the player is first loaded. It is must be in JPG format.
  • MP3 audio file - the audio of the video.

Upload the folders and files to mediastreamer server. For the flashstreamer server, upload the same folders and files except for the MP3 file, caption file, and the poster image file. If the main video requires an intro video, upload the intro video to the flashstreamer server as well but not in the mediastreamer server.

Setup (or How to Use) Introduction

Two ways to set up the player: the easy way and the "hard" way. Whichever way is used, they both must still follow the same initial setup of the file structure and naming convention.

First things first...

  • Gather the following files: main video file, caption file, MP3 audio file, PDF transcript file, poster image file, and optionally, if needed, the intro video file.
    • The main video file must be in MP4 or FLV format. The dimensions of the video must be greater than 640 by 360 pixels.
    • The caption file must be formatted for Flash or in CPT.XML format. If the caption is not available, place a temporary caption file instead.
    • The MP3 audio file is the audio of the video in MP3 format. It will be used for download.
    • The PDF transcript is the transcript of the video lecture in PDF format.
    • The poster image is the image that will be displayed when the player is loaded. The dimensions of the image file must match the video's dimensions.
    • If there an intro video that is needed for the main video, its dimensions must match the main video's dimensions. Also, it must be named the same as the main video with the addition of "_intro".
  • Create a folder. Name it accordingly to the name convention. This is the lesson folder.
  • Place the main video, caption XML file, the MP3, PDF transcript, and poster image into the lesson folder.
  • Connect to the mediastreamer server and upload the lesson file into its respective program and course.
  • Connect to the flashstreamer server and upload the lesson file into its respective program and course with the exception that only the main video inside the lesson folder gets to be uploaded and the intro video is needed.

The Easy Way

The easiest way to get the code for the player to be embedded on D2L is by using the CEOEL Embed Code Generator. However, before getting the embed code, please use the Project Validator first to validate that everything is in order.

To get the code from the code generator, please enter the URL where the MP4 is located on the web server.

The embed codes that are generated by the CEOEL Embed Code Generator should look similar to the following codes:

<div class="videoPlayer generic_player">

    <object width="640" height="360" data="" type="application/x-shockwave-flash">
        <param name="FlashVars" value="pathURL=uwli-ltc/sandbox/ethansandbox/GenericPlayer/hwm300_intro.mp4&introTF=t&mediaURL=uwli-ltc/media/sandbox/ethansandbox/GenericPlayer/" />
        <param name="allowFullScreen" value="true" />
        <param name="src" value="" />

            <script type="text/javascript">
                var ua = navigator.userAgent;
                var checker = { iphone: ua.match(/(iPhone|iPod)/), blackberry: ua.match(/BlackBerry/), android: ua.match(/Android/) };
                if (checker.iphone || checker.ipod) { document.write("<div style=\"clear:both;height:180px;position:relative;width:320px;margin-left:-8px;padding:0\"><a style=\"border:0px;\" href=\"\" target=\"_blank\"><img style=\"position:absolute;left:0;top:0;z-index:20;padding-top:0;height:180px;width:320px;border-width:0;margin:0\" src=\"\" /><img style=\"position:absolute;top:0;z-index:10;height:180px;width:320px;left:0;border-width:0;margin:0;padding:0\" src=\"\" /></a></div></div>"); }
                else { document.write("<div style=\"clear:both;height:360px;position:relative;width:640px;padding:0\"><a style=\"border:0px;\" href=\"\" target=\"_blank\"><img style=\"position:absolute;left:0;top:0;z-index:20;padding-top:0;height:360px;width:640px;border-width:0;margin:0\" src=\"\" /><img style=\"position:absolute;top:0;z-index:10;height:360px;width:640px;left:0;border-width:0;margin:0;padding:0\" src=\"\" /></a></div></div>"); }
    <div class="support">
        <a class="supportLink" href="">Course Support</a>

The Hard Way

Stick with the easy way.

Known Bugs

None at the moment, but do make sure to update Adobe Flash Player to the latest version.

Bug Reporting

If any bugs are found in the GVP player, please report them in Basecamp. Login to the website is required. Once logged in, please write a bug report under the Generic Player Bugs list, which is under Bug Reporting (Media Tools and Players). When reporting an bug, please write the report as detailed and specifically as possible and include screen captures if possible. Also note down the steps to reproduce the bug. To aid in bug reporting or when encountering errors or abnormalities in the player, use the Developer's Panel. To open the Developer's Panel, right-click the player and select Developer's Panel.

Version Log

Initial release. 05.29.2012 | 04:18:02PM

Version 2.0.1 08.20.2012 | 04:59:23PM

  • HTTPS enabled
  • Play / Pause button is now correctly displayed when using the seek bar.

Version 2.0.2 10.18.2012 | 03:39:49PM

  • Caption button is no longer clickable during intro animation video.

Version 2.0.3 10.22.2012 | 04:10:53PM

  • Remove an unnecessary black backdropped.

Version 2.0.4 12.20.2012 | 12:41:46PM

  • Playback control is properly resized on full screen and normal screen.

Version 2.1.0 03.08.2013 | 01:23:37PM

  • Playback controls background color updated
  • Added reconnection features

Written by Ethan Lin. Edited on September 4th, 2013.

Copyright © 2011-2013. University of Wisconsin-Extension, Continuing Education, Outreach & E-Learning. All rights reserved.