A web-based video player that streams video content from multiple supported sources in various formats.
Version: 4.1.5
Generic video player is built on top of VideoJS, an open-sourced HTML5 video player.
File Structure
- The generic video player supports downloadable files such as transcripts (PDF), videos (MP4), audios (MP3), and supplements (ZIP). Support for other downloadable files can be added. Refer to the manifest section for more details.
- A gvp.xml file is required for specifying the video source and any additional features. This XML file instructs the generic video player on what to do. Refer to the XML File section for more details.
- The poster image for a local video must be in JPG format. For video content from a remote source (excluding YouTube), the poster image file will also be loaded remotely.
- Local video must be in mp4 format.
- The subtitles or captions file should be in vtt format. For video content from a remote source (excluding YouTube), the caption file will also be loaded remotely.
- The GVP APP folder holds all the core scripts for the generic video player. These scripts can be centralized on a server, removing the need to include them in every presentation. Additionally, the folder contains a manifest file (JSON), which stores global configurations/settings for all instances of the generic video player that reference the centralized scripts.
Player Interface
Poster Screen
- Title – the title of the video. If the video is from Kaltura or Brightcove, the title will be set automatically. Otherwise, the title has to be manually set in the URL. Refer to Query Strings section for details.
- Author’s name – the author or speaker in the video if available.
- Poster image – the poster image for the video. If the video is from Kaltura or Brightcove, the poster image should be set automatically from the remote source. Otherwise, please included poster image in jpg format in the root directory.
- Play button – click to start the video. Click anywhere on the poster image will also starts the video.
- File Downloads button – click to download any available files.
Player Controls
- Play/pause – click to play or pause the video.
- 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.
- 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.
- Mute/Unmute – click to mute or unmute the audio. Volume level bar will also appear when hovered over this button.
- Progress bar – (white dot) displays the current progression of the video. Click and drag to scrub or seek the video.
- 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. Refer to the XML File section for more details.
- Remaining Duration – displays the remaining duration of the video.
- Playback rate – change the speed of the video.
- 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.
- Closed Caption – click to show subtitle or caption for the video. This button will not be displayed if there are no caption available.
- Quality – change the quality of the video if available
- Full screen – click to enter the video in full screen mode.
Manifest (JSON) File
The manifest file contains global settings for the generic video player.
gvp_ga_tracking
– holds Google Analytics Measurement and Google Tag Manager IDs.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_default_content_directory
– holds the path to a remote directory where the XML files would most likely be located.gvp_kaltura_id
– holds the organization ID from Kaltura.gvp_copyright
– holds the the copyright text to display.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.
XML File
The gvp.xml file is required for video content that needs to use the generic video player.
-
settings
– this tag contains the essential information for the Generic Video Player.title
– the title to display above the video player. This tag is optional, and it overwrites the video title from all sources.author
– The author’s name. This tag is optional.brightcoveId
– holds the Brightcove video ID. This tag is required for Brightcove video.kalturaId
– holds the Kaltura video entry ID. This tag is required for Kaltura video.youtubeId
– holds the YouTube video ID. This tag is required for YouTube video.fileName
– holds the file name of the local video. This tag is required for local video and has no effect if other video sources are specified.downloadFileName
– holds the file name for all download files. Please use proper file naming conventions: no special characters, lowercase, and dashes or underscores for spaces. This tag is required. Otherwise, the player will defaulted to use “video” as the file name.captionLanguage
– this tag is optional and only for local video and YouTube video. This specifies the ISO 639-1 language localization code and label to appear in the video player’s caption button.
markers
– this tag nests individualmarker
tag.-
marker
– this tag is nested inside themarkers
tag, and it has a requiredtimecode
attribute and an optionalcolor
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. The title is optional. Tooltip will not be shown if empty.
color
– specify the color of the marker with HEX or RGB(A) string.
brightcoveId
, kalturaId
, youtubeId
, and fileName
cannot be specified all at once. Only one of them is needed, depending on where the video source is located.Captions
- Brightcove – video from Brightcove supports multiple caption tracks. Caption tracks are automatically added if available in Brighcove.
- Kaltura – video from Kaltura supports multiple caption tracks. Caption tracks are automatically added if available in Kaltura.
- YouTube – captions directly from YouTube is no longer supported because the API service was shut down by Google. However, a local caption (.vtt) file can be used instead. This caption file name must be the same as the YouTube video’s ID and place in the root directory.
- Local video – A local caption (.vtt) file can be loaded for a local video. This caption file name must be the same as the root directory’s name and place in the root directory (like the XML file).
Query Strings
Generic Video Player supports the use of URL query string. A URL query string is a part of a web address that pass information to a web application. The structure of a URL query string is typically made up of key-value pairs separated by an equal sign (=) and joined by an ampersand (&). The first key-value pair in a query string always start with a ?
, and the rest of the key-value pairs should be concatenated with an &
.
Example of a query string:
www.example.com?src=path-to-gvp.xml&autoplay=1
All key-value pairs—except src
—are optional and do not have to be specified in any specific order. The table below listed all of the supported key-value pairs.
Keys | Values | Description |
---|---|---|
src Required! |
path-to-gvp.xml default: none |
the location of the gvp.xml file |
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 |
The src
and title
parameters support URL or percentage encoding. The start
and end
parameters do not have to be used together. The value for the start
and end
does not have to be exactly in the #h#m#s
format. It can be written as #h
, #m
, #s
, #m#s
, etc.