Install dependencies via yarn install.

Build via yarn run build.

Start local dev environment via: yarn run dev

Start local server with index.html via yarn start

You can use yarn start and yarn watch in different terminals to see saved changes immediately. Important: You have to set the correct url of your API in index.html as data-endcard-url on video element.

Test via yarn run test.

For more commands see package.json

This is a plugin for a videoplayer, make sure your videoplayer provide these functions.

The Stroeer Videoplayer Endcard Plugin works with data from a custom API but uses determined keys. So you have to provide these keys or you have to map these in the options object. For more information read next section.

The Stroeer Videoplayer Endcard Plugin uses determined data keys. If these keys are named different in your API, you can map as many keys as you like via dataKeyMap in options object.

myvideoplayer.initPlugin('Endcard', {
  showEndcard: true,
	dataKeyMap: {
		// key of endcard, key from API
    poster: ‘preview_image’,
    endpoint: ‘endcard_url’,
    image_small: ‘thumbnail’,
    image_medium: ‘preview_image’,
    image_large: ‘preview_image’,
	},
})

These endpoint items are needed for the endcard plugin:

endpoint: string - link to the suggestions for this video

title: string - caption/title of the video

image_small: string - poster image in small size for all images and a browser width less than 769px

image_medium: string - poster image in medium size for all images and a browser min-width: 769px

image_large: string - poster image in large size for the large image and a browser min-width: 769px

poster: string - poster image which will be set in the original video element after the endcard

playlists: array of strings - needed by the video player

An API example could look like this:

[
  {
    "title": "Elden Ring: Fundorte aller 7 legendären Zauber und Anrufungen",
    "image_small": "https://files.giga-video.de/8b/8f/d4/ce5267fe9772673bb448ea25f9_ciAyNDYgMTM4AzhmYzJmNzZiNGFm.jpg",
    "image_medium": "https://files.giga-video.de/8b/8f/d4/ce5267fe9772673bb448ea25f9_ciAyNDYgMTM4AzhmYzJmNzZiNGFm.jpg",
    "image_large": "https://files.giga-video.de/8b/8f/d4/ce5267fe9772673bb448ea25f9_ciAyNDYgMTM4AzhmYzJmNzZiNGFm.jpg",
    "poster": "https://files.giga-video.de/8b/8f/d4/ce5267fe9772673bb448ea25f9_AzhmYzJmNzZiNGFm.jpg",
    "playlists": [
      "https://lx56.spieletips.de/2072001061_v4/playlist.m3u8",
      "https://vid-cdn60.stroeermb.de/2072001061_v4/playlist.m3u8",
      "https://vid-cdn61.stroeermb.de/2072001061_v4/playlist.m3u8"
    ],
    "endpoint": "https://videos-dev.giga.de/suggestions/2072001061"
  },
  {
  ...
  },
]

If there is a problem with the API then the fallback (only replay tile) is shown.

You can see all available options here.

Callback which is triggered when Endcard is loaded and shown.

Callback which is triggered when user clicks on one tile except replay tile.

Callback which is triggered when user clicks on replay tile.

Callback which is triggered when an endcard video is started by revolverplay.

Callback which is triggered when user clicks on "Anhalten"-button.

Object to map keys of API data structure.

The number of seconds for the revolverplay countdown. If you set 0 then revolverplay is deactivated.

Default: 5

If set to true the fallback (only replay tile) is shown.

Default: false

A function which gets the current API Data after it got transformed by the dataKeyMap and should return a conformal data object. This function can be used to filter or manipulate the data in an data format compliant way.

You can see a running example also in index.html

The only required data-attribute for the endcard to work is data-endcard-url.

<video id="myvideo" class="stroeervideoplayer" data-endcard-url="http://localhost:5000/">
	<source src="https://vid-cdn60.stroeermb.de/1307753225_v4/playlist.m3u8" type="application/x-mpegURL">
</video>

const myvideoplayer = new StroeerVideoplayer(video)
myvideoplayer.initPlugin('Endcard', {
	revolverplayTime: 7,
	dataKeyMap: {
		image_large: 'preview_image',
		image_medium: 'preview_image',
		image_small: 'thumbnail'
	},
	onLoadedCallback: () => {
		console.log('OnLoadedCallback triggered')
 	},
 	onClickToPlayCallback: () => {
		console.log('onClickToPlayCallback triggered')
	},
	onClickToReplayCallback: () => {
		console.log('onClickToReplayCallback triggered')
	},
	onRevolverplayCallback: () => {
		console.log('OnRevolverplayCallback triggered')
 	},
 	onRevolverplayPauseCallback: () => {
		console.log('OnRevolverplayPauseCallback triggered')
	},
})

You have multiple scss variables to style your endcard.

$endcard-plugin-highlight-color: #424242 !default;
$endcard-plugin-bg-color: #000 !default;
$endcard-plugin-tile-border: 2px solid #fff !default;
$endcard-plugin-title-bg: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.8) 100%
) !default;
$endcard-plugin-spacing-large: 16px !default;
$endcard-plugin-spacing-small: 12px !default;
$endcard-plugin-font-size-small: 12px !default;
$endcard-plugin-font-size-smaller: 10px !default;
$endcard-plugin-font-size-medium: 14px !default;
$endcard-plugin-font-size-large: 16px !default;
$endcard-plugin-text-color: #fff !default;
$endcard-plugin-button-pause-bg-color: rgba(255, 255, 255, 0.4) !default;
$endcard-plugin-button-pause-bg-color-hover: rgba(255, 255, 255, 0.2) !default;
$endcard-plugin-tile-overlay-bg: rgba(0, 0, 0, 0.4) !default;
$endcard-plugin-controlbar-height-mobile: 55px !default;