@europeana/media-player

Europeana Media Player Library

Created as part of the Europeana Media Project

Build Setup

Install package dependencies:

• npm install

Development environment

Run a development environment

• npm run dev

This will start a webpack-dev-server serving dev/index.html on port 8080, alternatively specify a custom port:

• npm run dev -- --port [CUSTOM_PORT]

Insert a IIIF manifest url of the item you want to view and click on "Load in player". Find some manifest examples below

Linting

To lint-check the .js run:

• npm run lint
• npm run lint:fix

To lint-check the .scss run:

• npm run lint:style
• npm run lint:style:fix

Testing

Run unit tests with either of:

• npm run test
• npm test

Generate a coverage report with:

• npm run test:coverage

Run end-to-end tests with:

• npm run test:e2e (defaults to chrome) or with the browser-specific commands:
• npm run test:e2e:chrome
• npm run test:e2e:firefox
• npm run test:e2e:chrome:headless
• npm run test:e2e:firefox:headless
• npm run test:e2e:headless
• npm run test:e2e:all

Build for production

Run:

• npm run build:production

Publication

• on releases publishes to npm using a web-action

Dependencies

The player has unbundled dependencies on jQuery and jQuery-UI that have not been packed into this library. For jQuery-UI also themes/base/jquery.ui.core.css and themes/base/jquery.ui.slider.css are required in order to show slider buttons.

Example:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery.ui.core.css"></link>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery.ui.slider.css"></link>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

Further dashjs is needed if you plan to stream MPEG DASH videos.

Example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js" type="text/javascript"></script>

Embed player

To embed the player please firstyourself first make sure to include the Europeana Media Player Library

import EuropeanaMediaPlayer from 'europeanamediaplayer';

or

const EuropeanaMediaPlayer = require("europeanamediaplayer");

The constructor of the Europeana Media Player is

var player = new EuropeanaMediaPlayer(container, videoObject[, options]);

The constructor accepts the following parameters

Name	Type	Description
container	DOM Element	the DOM element in which to create the player, mandatory
videoObject	JSON Object	the object containing the video properties, mandatory
options	JSON Object	an optional object containing the player options

The videoObject accepts the following properties

Name	Type	Description
manifest	String / JSON Object	the url of the IIIF manifest for the media item or the manifest itself as JSON object, mandatory
canvasId	String	the canvasId of the canvas to show, can be used when having a manifest with multiple canvases, optional

The options accepts the following properties

Name	Type	Description
editor	String	url, allows to configure an external editor so that embedding and other editorial options can be done on that page, optional
language	String	2 character iso 639-1 language code, all official languages of the European Union are supported. The default language is English, optional

Examples

Basic example

This basic example contains only the required parameters.

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation/2051906/data_euscreenXL_http___openbeelden_nl_media_9972/manifest?format=3" };
new EuropeanaMediaPlayer(container, videoObj);

Editor example

This example sets the editor to show the editorial option menu in the player.

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation/2051906/data_euscreenXL_http___openbeelden_nl_media_9972/manifest?format=3" };
var options = { editor: "https://video-editor.eu" };
new EuropeanaMediaPlayer(container, videoObj, options);

Editor and language example

This example sets besides the editor the player interface language to Dutch

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation/2051906/data_euscreenXL_http___openbeelden_nl_media_9972/manifest?format=3" };
var options = { editor: "https://video-editor.eu", language: "nl" };
new EuropeanaMediaPlayer(container, videoObj, options);

Multiple canvases example

This example loads a manifest containing multiple canvas elements and loads the second canvas element (p2) on initialisation

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation//2051921/data_euscreenXL_7081/manifest?format=3", canvasId: "https://iiif.europeana.eu/presentation/2051921/data_euscreenXL_7081/canvas/p2" };
new EuropeanaMediaPlayer(container, videoObj);

Multiple canvases example via setCanvas

This example loads a manifest containing multiple canvas elements and loads the second canvas element(p2) when invoking the setCanvas() call

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation//2051921/data_euscreenXL_7081/manifest?format=3" }
var emp = new EuropeanaMediaPlayer(container, videoObj);
....
emp.player.setCanvas("https://iiif.europeana.eu/presentation/2051921/data_euscreenXL_7081/canvas/p2");

Multiple media items example

This example loads a manifest containing multiple canvas elements each containing a media item and loads the canvas containing the provided media item on initialisation

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation//2051921/data_euscreenXL_7081/manifest?format=3", mediaItem: "http://thraki.mmb.org.gr/002_07.mpg" };
new EuropeanaMediaPlayer(container, videoObj);

Multiple media items example via setMediaItem

This example loads a manifest containing multiple canvas elements each containing a media item and loads the canvas containing the provided media item when invoking the setMediaItem() call

var container = document.body;
var videoObj = { manifest : "https://iiif.europeana.eu/presentation//2051921/data_euscreenXL_7081/manifest?format=3" }
var emp = new EuropeanaMediaPlayer(container, videoObj);
....
emp.player.setMediaItem("http://thraki.mmb.org.gr/002_07.mpg");

License

Licensed under the EUPL v1.2.

For full details, see LICENSE.md.