Video.js Customizations
Ramp uses a Video.js player framework underneath the ReactJS component, to provide playback of media. Video.js provides a lot of plugins to add extra functionality the player. And Video.js also allows extending the native components to create custom components to add functionality to the Video.js instance in an application.
Ramp utilizes this feature in Video.js and has a couple of custom built components to help visualize some of the extra information within the IIIFPlayer component.
These two Video.js custom components helps to switch between canvases when there are multiple canvases in the given IIIF Manifest. They are added to the player control bar only when there are multiple canvases in the Manifest.
When the player is on the first Canvas in the Manifest, the previous button will reset the time to zero.
This custom component shows up in the player's control bar as a menu button when there are files listed under rendering property providing alternate representation of the main resource(s) presented in the Manifest. When hovering over the icon the menu is displayed, and clicking on the title of the file downloads it to user's device.
Another custom Video.js component that adds extra functionality is the track scrubber, indicated within the player's control bar using a magnifying glass icon.
Once clicked on the track scrubber button, it collapses a panel below the player to visualize the current track;
This helps to scrub media fragments in structures with a finer granularity, since it visualizes a smaller time fragment in a larger area than it would within the normal progress bar in the player. This is only added to the player control bar when there are Range items within structures property in the given IIIF Manifest with media fragments (Canvas references).
Examples from IIIF Cookbook recipes illustrating how it works in 2 different scenarios;
- Shows track scrubber button when there are Range items with Canvas references in
structures: cookbook recipe in Ramp - Does not show track scrubber button when there are no
structures: cookbook recipe in Ramp