MediaPlayer Component

MediaPlayer component provides a player that facilitates playback of both audio and video media files in a Presentation 3.0 IIIF Manifest. It encapsulates a VideoJS instance, which is an HTML5 player framework. MediaPlayer component fetches data from central state management system using ReactJS Context providers. Therefore this component must always be encapsulated by the IIIFPlayer component.

Props Explained

MediaPlayer component accepts the following props;

• enableFileDownload (Boolean) : this has a default value of false and is not required. Once this is set to true it adds an button with a menu to the player's control bar to display files listed under the rendering property for the displayed Canvas and enables downloading them. This is a custom component added to the Video.js instance in Ramp.
• enablePIP (Boolean) : this has a default value of false and is not required. When this is set to true, it adds an icon to the player's control bar to enable Picture-In-Picture feature for the current player instance.

How to use the MediaPlayer component?

import { IIIFPlayer, MediaPlayer } from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl="http://example.com/manifest.json">
  <MediaPlayer enableFileDownload={true} />
</IIIFPlayer>;

This code generates the MediaPlayer component with the file download icon in the player's control bar;

When enablePIP={true} is added to the MediaPlayer component player is created with the Picture-In-Picture menu icon in the control bar;

The Video.js instance underneath the MediaPlayer component has a couple of custom Video.js components implemented in the Ramp code to add extra functionality to the player. Please read more on these custom components here.

Player Hotkeys

For ease of use of the media player, hotkeys (keyboard shortcuts) are enabled for player functionalities. A hotkey is a key or a key combination on a computer keyboard when pressed at one time performs a task ¹ . List of supported hotkeys in the player are as follows;

• Space key: play/pause media playback
• M key: mute/un-mute media
• F key: toggle full-screen on/off
• Up arrow key: increase volume by 10% (full volume is equal to 100%)
• Down arrow key: decrease volume by 10%
• Left arrow key: jump 5 seconds backward from the current time in the player
• Right arrow key: jump 5 seconds forward from the current time in the player