Europeana Media Player Library

Created as part of the Europeana Media Project

Build Setup

Install package dependencies:

• npm install

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 an accessibility test with:

• npm run test:accessibility

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

• 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. Further dashjs is needed if you plan to stream MPEG DASH videos.

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").default;

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 videoObject | JSON Object | the object containing the video properties options | JSON Object | an optional object containing the player options

The videoObject requires the following property

Name | Type | Description ---- | ---- | ----------- manifest | String | the url of the IIIF manifest for the media item

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 language | String | 2 character iso 639-1 language code, all official languages of the European Union are supported. The default language is English

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);

License

Licensed under the EUPL v1.2.

For full details, see LICENSE.md.