Generic Video Player v4

Generic Video Player version 4 is built on top of VideoJS library.

Latest version: 4.0.0 (beta)

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 4 has one minor change but major effect and like previous version the following requirements must be fulfilled:

  • 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 has been replaced with an XML file
  • gvp.xml is needed if the video is hosted on Kaltura or the marker feature is needed. See the XML section for more details.
  • 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 source code and the new manifest file are 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 format
  • transcript file is optional but must be in pdf format if used
  • subtitle file must be in vtt format

Supported downloadable files are transcript (PDF), video (MP4), audio (MP3), and supplement (ZIP). Additional downloadable file can be added. See manifest section for more details.

The poster image, video, and subtitle/caption files are not needed if the video is hosted on Kaltura.

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.

Version 4 and its subsequent builds are not backward compatible with version 3 builds. Once version 4 is released, version 3 builds will be deprecated. Bug fixes (if any) will continue to be supported.

Annotated Screens

Poster

Generic Video Player Poster

  1. Title – the title of the video. If the video is from Kaltura, the title will be set automatically. Otherwise, the title has to be manually set in the URL. Refer to Query Strings section for details.
  2. Poster image – the poster image for the video. If the video is from Kaltura, the poster image should be set automatically. Otherwise, please included poster image in jpg format in the root directory.
  3. Play button – click to start the video. Click anywhere on the poster image will also starts the video.

Playback

Generic Video Player Playback

  1. Play/pause – click to play or pause the video.
  2. Skip Backward – skip backward video in seconds. The number of seconds to skip depends on the length of the video and is indicated inside the button. This button will not be displayed if the video duration is less than one minute.
  3. Skip Forward – skip forward video in seconds. The number of seconds to skip depends on the length of the video and is indicated inside the button. This button will not be displayed if the video duration is less than one minute.
  4. Mute/Unmute – click to mute or unmute the audio. Volume level bar will also appear when hovered over this button.
  5. Progress bar – (white dot) displays the current progression of the video. Click and drag to scrub or seek the video.
  6. Markers – (green dots) hover over the markers to see their tool tip related to the content of video at that duration. Click to seek to that position. Marker color can be changed. See XML for more details.
  7. Remaining Duration – displays the remaining duration of the video.
  8. Playback rate – change the speed of the video.
  9. Download – download files that are associated to the video. This button will not be displayed if there are no downloadable files or is embedded inside a Storybook Plus presentation.
  10. Closed Caption – click to show subtitle or caption for the video. This button will not be displayed if there are no caption available.
  11. Quality – change the quality of the video. This button will not be displayed if there are no other qualities available.
  12. Full screen – click to enter the video in full screen mode.

iFrame Embed

When embedded in an iFrame, the video will be have a different style. It will be scaled to the size of the iFrame with max width set at 900 pixels (and height at 506 pixels).


Manifest (JSON) File

In version 4.0.0, a manifest file in JSON format is introduced. This manifest contains global variables or settings for the latest version of generic video player.

  • The properties from line 2 to 8 are for browser purposes only. Do not edit.
  • gvp_google_tracking_id – a placeholder for Google Analytic tracking code. Version 4.0.0 does not support this property yet.
  • gvp_root_directory – holds the path to the root directory where the source files are stored. Defaults to the local “sources” directory if empty.
  • gvp_logo_directory – holds the path to the directory where program logo are stored.
  • gvp_logo_default – holds the default logo file name to use if no logos were found. This property is also used to set the default program theme.
  • gvp_kaltura – holds the organization and video flavor IDs from Kaltura
  • gvp_copyright – holds the copyright notice. This copyright notice does not need to included the copyright symbol and year. The symbol and year will be dynamically added by the script.
  • gvp_download_files – holds the supported downloadable file format and its label. Specified additional downloadable files here to add to the player’s download list.
  • gvp_custom_themes – holds the theme for each program. Specific theme will be applied base on the program path.
    • name – the name of the theme; must match the abbreviated program name (same name as the program logo).
    • colors – holds an array of heximal color codes. This is the color bar displayed above the video when not embedded inside an iFrame. No limits on number of color code.

XML

gvp.xml is introduced in version 4.0.0 to replace the kaltura.txt file. In addition, markers feature is now available. This XML file is only required if video is hosted on Kaltura, YouTube, or markers are used.

Some tags in the XML are optional and have no effect if set.

  • settings – this tag nests the title, kalturaId, and fileName tags.
    • title – this tag is optional, and it overwrites the video title from Kaltura or the URL title string query parameter value.
    • kalturaId – this tag is required for Kaltura video and holds the Kaltura video ID.
    • youtubeId – this tag is required for YouTube video and holds the YouTube video ID.
    • fileName – this tag is optional and has no effect if kalturaId is specified. It overwrites the file name that is parsed from the URL if for some reason a different file name is desired.
  • makers – this tag nests individual marker tag.
  • maker – this tag is nested inside the markers tag, and it has a required timecode attribute and an optional color attribute.
    • timecode – specify the timecode of when the marker should be placed. The supported format is 00:00:00 (hour:minute:second) or 00:00 (minute:second).
    • The title of the marker is wrapped inside the tag.
    • color – specify the color of the marker with HEX or RGB(A) string.
If both youtubeId and kalturaId tag are specified, kalturaId will have higher priority and youtubeId will be ignored.
YouTube video will not have video download as an option. It is against YouTube/Google’s Term of Services/Uses policy.

Query Strings

Generic Video Player version 4 continues to use query string from version 3 with additional changes. Query string is a string of parameters with values, which are appended to the end of an URL.

Example of a query string:
?title=title%20goes%20here&autoplay=1

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., ?title=title%20goes%20here).

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

Parameters Values Description
title some%20title%20goes%20here
default: none
title of the video
light default: 0 set to 1 to load a dark background
autoplay default: 0 set to 1 to auto play video on page ready
start default: none set the start time of the video in #h#m#s format
end default: none set the end time of the video in #h#m#s format

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

NOTE The start and end do not have to be used together. The value for the start and end does not have to be exactly in #h#m#s format. It can be written as #h, #m, #s, #m#s, etc.

Version 4.0.0 drops support for intro videos.

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, the gvp.xml file is needed. See XML section for details.

YouTube Video
For requesting video from YouTube, the gvp.xml file is needed. See XML section for details.

Markers
Version 4 introduces the markers feature. It allows the showing of markers on the video’s progress bar on the playback control. Markers are accompanied by a tool tip that displays the marker’s title. See XML section for details.

Published on February 07, 2018 at 3:10:51 pm CST. Last modified on August 07, 2018 at 2:20:25 pm CST.