Moments Plugin

Overview

Moments (mp4e:moments, an official plugin) marks the key moments of a video. As the video reaches each one, a short pop-up shows its number, a label and its title for a few seconds. A Moments entry in the player's settings menu opens a list of every moment, and a tap (or OK on a remote) jumps there.

Moments 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 moments to a video

1. Install Moments from the marketplace.
2. Add one Moments overlay covering the whole timeline. It covers the whole frame and places its own pop-up, so do not resize it: pick a position instead.
3. Enter the moments, 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 moments

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

[
  { "title": "The first goal", "time": 312 },
  { "title": "Red card", "time": 1490, "label": "Turning point" },
  { "title": "Winning penalty", "time": 2705, "text": "Taken in the 89th minute" }
]

Entries without a title or a time are left out, and the rest are ordered by time. A moment's pop-up is up from its time for duration seconds; a later moment inside that time takes over.

With no moments listed, Moments reads the video's key moments of kind highlight through mp4e.getIntelligence() (each moment's title, its time, and its description as the list's line of text), 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 — nothing shows.

Settings

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

How it behaves

• The pop-up is something to glance at: every click goes through to the video, your hotspots and the player's controls. A seek shows the right pop-up at once, or none when it lands outside every moment's time.
• Opening the list pauses a playing video. Picking a moment jumps there and plays on; closing the list — a tap outside it, its close button, Escape, Backspace or Back — resumes. Playing again closes it too.
• The open list sits above every other overlay, including a card in the same corner, so the viewer's first tap always reaches it. Closed, Moments sits below your other overlays: a pop-up never covers one.
• A keyboard or TV remote moves through the list with the arrow keys and picks with Enter or OK. The list marks the last moment reached.
• On a phone-sized player the pop-up spans the frame with its title on one line, and the list becomes a sheet above the player's controls. Pop-ups and the list always stay clear of the controls bar.

To let viewers open the list without the player menu, bind a key or a button to the openList action:

{ "type": "pluginAction", "pluginId": "mp4e:moments", "actionId": "openList" }

Actions and events

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

seekRequested says a seek was asked of the player and time where to — not that it happened, since the player may refuse it or land elsewhere.

Moments emits two events, each with { index, number, title, time } — index from 0, number as shown (from 1), and time the moment's time in seconds:

• momentReached — the playhead reached a moment, by playing into it or by a seek into its pop-up's time. It follows the player's own time, so it never fires when the video loads, when the settings change, or when a seek skips past the moment.
• momentClicked — the viewer picked a moment in the list (the video then jumps to it).

Rules hear them as plugin:mp4e:moments:momentReached and plugin:mp4e:moments:momentClicked:

Trigger:    plugin:mp4e:moments:momentReached
Condition:  eventData.number equals 2
Action:     showOverlay  offer-after-moment-2

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

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