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 goes into the IIIFPlayer component;

1. manifestUrl: URL of a manifest in the wild to be fetched
2. manifest : local manifest data in a JSON format

Here manifest props takes precedence of the manifestUrl if both are provided. At least one of the props should be provided when rendering the component.

How to use the IIIFPlayer component?

import { IIIFPlayer, MediaPlayer } from 'iiif-react-media-player';
import 'video.js/dist/video-js.css';
import '@samvera/iiif-react-media-player/dist/iiif-react-media-player.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.