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.

• enablePlaybackRate (Boolean) : this has a default value of false and is not required. When this is set to true, it adds an icon-button to the player's control bar which provides a menu to select a different playback speed for the media. The available speed options are 0.5x, 0.75x, 1x, 1.5x, and 2x (supported from Ramp 3.2.0 onward)

• enableTitleLink (Boolean): this has a default value of false and is not required. When this is set to true, it adds a title bar to the video player which displays Manifest Label - Active Canvas Label with an href attribute linking to the URL in the active canvas's id. This is a custom VideoJS component added to the VideoJS instance in Ramp (supported from Ramp 3.2.0 onward)

• withCredentials (Boolean): this has a default value of false and is not required. Once this is set to true it causes the VideoJS component to include any available Authentication and Cookie headers with XHR requests. There are special server-side CORS requirements that go along with this option – specifically, the streaming server should include an appropriate Access-Control-Allow-Credentials header, and a non-wildcard Access-Control-Allow-Origin specifying the server originating the request (supported from Ramp 3.2.0 onward)

---

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

---

Inaccessible resource display

When a given resource in a Canvas is not available to be played either due to permissions or it's general unavailability, it is generally indicated in the Canvas as an empty list of Annotation under AnnotationPage. Ramp handles this use-case by displaying a message in the player space. This message is parsed from placeholderCanvas property of the same Canvas if available, and if not Ramp sets it to a default message specified in the code.

And when AutoAdvanceToggle is turned ON, this message is accompanied with a 10 second timer which automatically loads the next Canvas in the Manifest when the time is up.

The Previous/Next buttons and the timer display was added in Ramp 3.2.0.