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.