Generic Video Player v3

Generic Video Player version 3 is built with HTML5, CSS3, and VideoJS library.

Latest version: 3.3.3

VideoJS is an open-sourced HTML5 video player. For more information, please visit VideoJS website.

File Structure

Generic Video Player File Structure
The file structure for Generic Video Player version 3 stays the same as the previous versions with the exception of the following requirements:

  • an index.html file is needed
    • this file does not to be edited but make sure to put it in the same root directory with other files
  • kaltura.txt is needed if the video is hosted on Kaltura. This file contains the video entry ID from Kaltura. The text file must be a plain text file. You may have issue with the file if you converted a rich content file to plain text file. Always start with an empty plain text file.
  • the root directory must be named the same as the files it will hold
    • follow the media team naming conventions
    • directory name will be used by the player to determine the video source
    • The sources folder is centralized on the web server.

The root directory, poster image, video, transcript, compressed package (ZIP), and subtitle files should always be named the same.

  • poster image must be in jpg format
  • video must be in mp4
  • transcript file is optional but must be in pdf if used
  • subtitle file must be in vtt
The poster image, video, and subtitle files are not needed if the video is hosted on Kaltura.
WebM video format is no longer needed in version 3.3.0.

The resulting URL should be like the following:
OKAY https://media.uwex.edu/content/smgt/smgt360/smgt360_course_intro/
NOT OKAY https://media.uwex.edu/content/smgt/smgt370_r13/smgt370_course_intro/Cao/

The yellow highlighted part will be used by the player, and it should always be the last part in an URL. The red highlighted part is a no-no and not following the file structure and naming conventions.


Query Strings

Generic Video Player version 3 introduces query string. Query string is a string of parameters with values, which are appended to the end of an URL. It is somewhat similar to FlashVars for Flash objects.

Example of a query string:
?ttl=title%20goes%20here&w=640&h=360

The first parameter in a query string always start with a ?, and the rest of the parameters should be concatenated with an &. All parameters are optional and do not have to be specified in any specific order. Any use of parameter with default value does not have to be specified as well. Default values will be used automatically. However, no parameter should be left without a value (e.g., ?ttl=title%20goes%20here).

The table below listed all of the acceptable parameters and their values.

Parameters Values Description
ttl some%20title%20goes%20here
default: none
title of the video
w default: 640 width
h default: 360 height
autoplay default: 0 set to 1 to auto play video on page ready

NOTE The ttl query supports URL or percentage encoding. Please use the URL Builder to generate the correct URL and query strings.


Usage Instructions

How to use this player is straight forward. Follow the file structure above, and it will just works. Magic!

Kaltura Video
For requesting video from Kaltura, a kaltura.txt plain text file is required. The plain text file must contain only the Kaltura video entry ID.

Published on December 23, 2014 at 1:13:27 pm CST. Last modified on May 04, 2018 at 1:38:15 pm CST.