Steps Plugin

Overview

Steps (mp4e:steps, an official plugin) is a checklist that follows the video. The step being played is highlighted, the ones already done are ticked, a progress bar and a count ("Step 2 of 5") show how far along the viewer is, and a tap jumps to any step. The viewer can fold the panel to a single line showing the current step.

Steps 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 steps to a video

1. Install Steps from the marketplace.
2. Add one Steps overlay covering the whole timeline. It covers the whole frame and places its own panel, so do not resize it: pick Left, Right or Bottom in position instead.
3. Enter the steps, 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 steps

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

[
  { "text": "Whisk the eggs and sugar", "start": 12 },
  { "text": "Fold in the flour", "start": 64, "detail": "Gently, in three goes" },
  { "text": "Bake at 180°C", "start": 151, "end": 200 }
]

Entries without text or a start are left out, and the rest are ordered by start. When two steps' windows overlap, the one that started last is the current one.

With no steps listed, Steps reads the video's key moments of kind step through mp4e.getIntelligence() (each moment's title becomes the text, its time the start and its description the detail), 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 — the panel stays empty.

Settings

Steps' 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, Steps keeps the frame click-through and claims only the panel itself as tappable:

• While the video plays the panel follows along and its rows are tappable: a step jumps there and the arrow folds it. Every click around the panel goes through to the video, your hotspots and the player's controls.
• On a player without clickable regions, the panel takes taps only when the viewer pauses or the show action opens it; a tap anywhere outside the panel, Escape or Back, or playing again gives the frame back to the video.
• A keyboard reaches the panel with Tab at any time; the arrow keys then move between the steps and Enter jumps. Keys pressed on the player and a TV remote are followed after show.
• The list keeps the playing step in view, and a screen reader hears each new step as it starts.
• On a phone-sized player the side panel leaves out the times and detail lines, and the bottom row shows each step on one line. The panel always stays clear of the player's controls bar.

To let keyboard and remote viewers open the panel while the video plays, bind a key to the show action in the project's Input Shortcuts:

{ "type": "pluginAction", "pluginId": "mp4e:steps", "actionId": "show" }

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.

const answer = await mp4e.callAction('mp4e:steps', 'next');
// { seekRequested: true, time: 151 } — a seek was asked of the player.
// The player's time update is what says where playback actually is.

Steps emits two events, each with { index, number, text, time } — index from 0, number as shown (from 1), and time the step's start in seconds:

• stepReached — the playhead entered a step, by playing into it or by a seek. It follows the player's own time, so it never fires when the video loads or when the settings change.
• stepClicked — the viewer picked a step in the panel (the video then jumps to it).

Rules hear them as plugin:mp4e:steps:stepReached and plugin:mp4e:steps:stepClicked:

Trigger:    plugin:mp4e:steps:stepReached
Condition:  eventData.number equals 3
Action:     showOverlay  tip-step-3

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

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

Remembered progress

With rememberProgress on, the steps a viewer has finished are kept in the player's per-plugin storage on their device and stay ticked next time, even after seeking back. Changing the list of steps starts everyone afresh.