-
Notifications
You must be signed in to change notification settings - Fork 5
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.
MediaPlayer
component accepts the following props;
-
enableFileDownload (Boolean) : this has a default value of
false
and is not required. Once this is set totrue
it adds an button with a menu to the player's control bar to display files listed under therendering
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 totrue
, 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 totrue
, 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 (future release).
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 1 . 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
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.