Europeanamediaplayer NPM

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

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