Info Card Plugin

Overview

Info card (mp4e:info-card, an official plugin) shows timed cards that explain what is on screen. Each card has a title that always shows, a few lines of text and an icon for its kind, and it slides in and out with the video. One card shows at a time, in a corner of the frame or along the top.

Info card is a family plugin: it has the family's five themes, its common style settings, its minimum readable size and its keyboard and TV-remote navigation.

Adding cards to a video

1. Install Info card from the marketplace.
2. Add one Info card overlay covering the whole timeline. It covers the whole frame and places its own card, so do not resize it: pick a corner or Top in position instead.
3. Enter the cards, or leave them empty to use the video's analysis.
4. Pick a theme and a size. Lean-back is for a TV across the room.

The cards

cards is a list of cards in seconds of the video. It can also be JSON text, so a single {{listVariable}} can supply the whole list.

[
  { "title": "Maillard reaction", "text": "Browning that gives seared food its flavour.", "start": 42, "kind": "definition" },
  { "title": "Rest the dough", "text": "Ten minutes in the fridge makes it easier to roll.", "start": 95, "kind": "tip" },
  { "title": "Hot oil", "text": "Keep the lid nearby and never add water.", "start": 180, "end": 196, "kind": "warning" }
]

Entries without a start, or with neither a title nor text, are left out, and the rest are ordered by start. When two cards' times overlap, the one that starts later is shown; once it ends, an earlier card still inside its own time shows again.

With no cards listed, Info card reads the video's key moments of kind fact through mp4e.getIntelligence() (each moment's title becomes the title, its description the text and its time the start, as a Fact card), and follows the creator's edits to the analysis. It asks to read key moments only. If key moments are not allowed — by the creator in the plugin's Intelligence access or by the host — no card shows.

Settings

Info card's own settings, plus the family's common style settings (theme, accent, size, surface, textColor, font, radius, motion):

How it behaves

Because the overlay covers the whole frame, Info card keeps the frame click-through and claims only the part of it that needs a tap:

• While the video plays every click goes through to the video, your hotspots and the player's controls, except on the close button. When the card is dismissible (dismissible, on by default) its close button is shown and tappable while the video plays: it is the one clickable region the card claims, and nothing else on the frame takes a tap.
• A card the viewer closed stays closed while the video is inside its time; seeking out and back shows it again. With dismissible off there is no close button, and the card never takes a tap.
• On a player without clickable regions, the close button appears only when the viewer pauses, and the card then takes every tap on the frame, so the first tap on another overlay under it only gives the frame back. When such a video has other things to tap (a step list, a product card), turn dismissible off. A tap outside the card, Escape or Back, or playing again gives the frame back to the video; the card stays up.
• A keyboard or TV remote reaches the close button with Tab at any time.
• A screen reader hears each card as it appears, its kind first.
• On a phone-sized player the card spans the width of the frame, shows its kind by its icon only and cuts its text after two lines. Cards always stay clear of the player's controls bar.

Actions and events

Actions, through pluginAction from rules, other plugins and input shortcuts:

{ "type": "pluginAction", "pluginId": "mp4e:info-card", "actionId": "show", "config": { "index": 2 } }

Info card emits two events:

• cardShown { index, number, title, kind, start } — the video brought a card on screen, by playing into it or by a seek. It follows the player's own time, so it never fires when the video loads, when the settings or a variable change, or for a card the show action put up.
• cardDismissed { index, number, title, start } — the viewer closed a card with its close button. Actions never fire it.

index is the card's place in time order, from 0 (number from 1), and start the second it starts at. Rules hear the events as plugin:mp4e:info-card:cardShown and plugin:mp4e:info-card:cardDismissed:

Trigger:    plugin:mp4e:info-card:cardShown
Condition:  eventData.kind equals warning
Action:     pause

Your page hears them through onEvent (see Player Events):

<MP4EPlayer
  src="/video.mp4"
  onEvent={(event, data) => {
    if (event === 'plugin:emit' && data.event === 'cardShown') {
      // { index, title, kind }
      analytics.track('info_card_seen', data.data);
    }
  }}
/>

Opening from a tracked object

Info card can also be the card a tracked object opens: pick it as the display of an object group (or of one object) in the Studio's group settings, for clicked, hovered or visible. Opened that way it shows one card, at once, from its settings — no timeline, no full-frame layer: the card is the whole display, 600 × 300 design pixels unless the display sets its own size. Fill the settings from the object's data with {{object.data.*}}:

To set it up in the Studio, open the group's settings (the gear icon) and its Display Settings tab, add the event — Clicked for a card when the viewer taps the object, Visible for a card that opens by itself — and pick this plugin. Then:

• Fill the card's fields under its settings; each can use the object's own data, such as {{object.data.title}}.
• Tick Avoid covering objects so the card opens beside the object, clear of everything tracked on screen, and moves aside only when something moves under it.
• For Visible, tick Only when it's the only one on screen to show the card only while this object is the group's only one in view.
• Under Auto-close, When the object leaves the screen closes the card with its object.

• cards, position, duration and dismissible are not used; the style settings are.
• The close button (✕) is always there; it and Escape or Back close the card. The close button emits cardDismissed { title, objectId } — the object instead of an index. cardShown is not emitted; your page hears the card open as display:show.
• In the Studio these fields are listed as "(object card)" in the display's settings; a timed Info card overlay does not show them.