Multimedia Controls

Layout

Controls are presented in two rows.

• The scrub bar, which is used to scrub through the media clip, is provided on its own in the top row to maximize scrubbing precision.
• The bottom row contains the following controls from left to right:
  • Play/Pause (play /pause icon)
  • Time indicators (current / total)
  • Mute (volume-down /volume-up /volume-mute icon)
  • Volume slider
  • Closed captions (video only) (cc-on /cc-off icon)
  • Full screen (video only) (fullscreen /fullscreen-exit icon)

Play/Pause and the time indicators are left-justified. The remaining controls in the second row are right-justified.

In addition, a Hero Play button is provided for video clips. It is centered over the video to indicate that the test taker can click or tap anywhere on the video to play it.

Styling

• Default.
  • The unplayed section of the scrub track is medium gray #858585 .
  • The played section of the scrub track is blue #246BB2 .
  • The thumb is the same blue as the played section of the scrub track.
• Hover/active. Displayed when the cursor is over the scrub bar or while the test taker is scrubbing through the media clip.
  • The pointer cursor is shown.
  • The track and thumb are scaled up 150%. (Scaling remains during scrubbing, even if the cursor isn’t directly over the scrub bar.)
  • A dark gray #535353 bar extends from the right edge of the unplayed section of the track to the cursor position to help the test taker locate the cursor.
  • A tooltip (see below) appears above the scrub bar showing the time in the media clip associated with the current cursor position during both hover and drag.
• Disabled. Displayed when the scrub bar is inactive (e.g., when a modal system tool like Scratchwork is enabled).
  • The unplayed section of the track changes to a light gray #A6A6A6 .
  • The thumb and the played section of the track change to a medium gray #AAAAAA .

Volume slider

The volume slider is styled similarly to the scrub bar with the following exceptions:

• Only the thumb, not the track, scales up in hover/active state.
• A tooltip does not display in hover/active state.
• No dark gray bar appears to indicate the cursor position in hover state.

Other Buttons

Multimedia control buttons are 2x the base font size (see the Typography page) to ensure easy selection via touch. They have three states.

• Default. A dark gray #535353 icon with no background or border.
• Hover. Displayed when the cursor is over the button. Icon color darkens to #1E1E1E , and a tooltip appears above the button. The pointer cursor is shown.
• Disabled. Displayed when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Icon color lightens to #A6A6A6 .

Tooltips

Tooltips are displayed as white #FFFFFF text on an 85% opaque black #000000 background with rounded corners. This approach ensures that tooltips are visible on all video content. Tooltips are centered above their associated controls, except in cases where centering would cause the tooltip to extend past the edge of the multimedia control area (e.g., Play/Pause, Full screen). In such cases, the tooltip is aligned to the nearest edge of the control area with a bit of padding.

The tooltip for the scrub bar has a bottom tail to better connect it to the cursor position.

Subtitles

Subtitles are displayed as white #FFFFFF text on an 80% opaque black #000000 background with rounded corners.

Behavior

The volume slider affects the Mute button in the following ways:

• If the volume is set to >50%, the Mute button is set to the full-volume state: the icon changes to volume-up , and the tooltip changes to “Unmute.”
• If the volume is set from 1% to 50%, the Mute button is set to the half-volume state: the icon changes to volume-down , and the tooltip changes to “Unmute.”
• If the volume is set to 0%, the Mute button is set to the muted state: the icon changes to volume-mute , and the tooltip changes to “Mute.”

When the test taker mutes the audio via the Mute button, it remembers the previous volume level and restores it when the test taker selects Mute again.

• When restoring the previous volume level, the Mute button state changes accordingly, as described above.
• If the volume had been set to 0% via the volume slider, selecting the Mute button causes the volume to be set to 100%.

Full-screen mode

On entering full-screen mode, the Hero Play button receives focus so that the test taker can play or pause the video by hitting Enter or Space on the keyboard.

In full-screen mode, the control panel floats above the bottom of video content, taking up the full width of the screen, minus some padding. The corners of the control panel are rounded.

The controls remain on screen while the video is paused. Once the video begins playing, the controls fade out, and the cursor disappears after 3 seconds. The controls and cursor reappear when the video is paused or when the test taker moves the mouse, clicks the mouse, presses a key on the keyboard, or touches the device screen. When the test taker causes the controls to reappear during playback, the countdown to fadeout resets to 3 seconds.

When the controls are on screen, subtitles appear above them. When the controls are off screen, subtitles appear 2 line heights above the bottom of the screen. When the controls fade in or out, the subtitles animate between their two positions.

The test taker can exit full-screen mode by selecting the Full screen button or by hitting Escape on the keyboard.

SBT-specific Behavior

Because SBTs guide test takers through a linear sequence of activities, additional constraints are imposed on multimedia playback.

• When the video is played for the first time, it automatically enters full-screen mode unless there is other information on screen that the test taker must attend to while the video is playing. (Asking test takers to attend to a video and another form of information simultaneously is not considered a best practice and should be avoided.)
• Multimedia clips must be viewed/listened to in their entirety before the test taker is allowed to progress to the next screen.
• Test takers are allowed to use the scrub bar, but only through the section of the clip that has already been viewed/heard.

The following demos present the style and functional behavior of the multi-media controls for the video variant, audio variant, and select-in-stimulus variant.

Video Variant

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Audio Variant

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Select-in-stimulus Variant

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.