IIIFPlayer Component

IIIFPlayer is the main component of this component library, while the other 2 components are supporting components. The other components needs to be wrapped by the parent IIIFPlayer component, with the exception of Transcript component (more details in the Transcript component document).

Props explained

There are 2 props that go into the IIIFPlayer component;

• manifestUrl (URL): URL of a manifest in the wild to be fetched
• manifest (JSON) : local manifest data in a JSON format manifest : accepts a JSON object representing data in a IIIF Manifest

** Either manifestUrl or manifest is REQUIRED. If both props are given then manifest takes precedence over manifestUrl. At least one of the props should be provided when initializing the component

• customErrorMessage: accepts a messagge to display to the user in the unlikely event of the component crashing, this has a default error message and it is not required. The message can include HTML markup.
• startCanvasId: accepts a valid Canvas ID that exists within the given Manifest, this can specify the Canvas to show in Ramp on initialization. This can be mapped to the start property in a IIIF Manifest.
• startCanvasTime: accepts a valid number for a time in seconds to start playback in the Canvas shown in Ramp on initialization.

** If the given Manifest has a start property defined in it, then it takes precedence over startCanvasId and startCanvasTime props

How to use the IIIFPlayer 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" manifest={manifest}>
  <MediaPlayer />
</IIIFPlayer>

Cross-site Requests for Manifests

This info pulled from the Diva.js package

You may receive an error that looks something like this:

XMLHttpRequest cannot load http://example.com/demo/imagefiles.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

This is a security precaution that all browsers use to prevent cross-site request forgeries. If you receive this message it is because your manifestUrl prop and the server used to serve the OpenSeadragon React Viewer are not at the same server address.

To fix this you must ensure that the OpenSeadragon React Viewer host's React application, and the location pointed to by the manifestUrl prop are being served by the same server, or you must create an exception using the Access-Control-Allow-Origin header on your server to explicitly white-list the manifestUrl location.