Storyline 360: Accessible Video Controls

Article Last Updated

This article applies to:

Videos are one of the most consumed types of online content. They're great for presenting information in an engaging way, breaking up text-heavy presentations, and capturing learners' attention.

Starting with the June 2022 update, Storyline 360 delivers several accessibility updates for the modern player's built-in video controls, providing a more inclusive experience for all learners. Here's how everyone benefits.

Accessible Controls

Your video content will look better and be more accessible with fine-tuned video controls. We've refreshed existing controls like the play/pause button and the seekbar to be more legible and stylish. We also added several video controls that are grouped semantically with an overall layout that's easy to navigate.

A course with accessible video controls enabled.

Enhanced Contrast

Without optimal contrast, learners with visual disabilities might have difficulty navigating your content. Now the built-in dark and light theme video controls automatically exceed WCAG Level AA guidelines for visual contrast and color, resulting in an accessible interface. And the best part is you can choose between the dark or light theme video controls or omit them on a slide-by-slide basis. Simply click your video placeholder, go to the Options tab on the ribbon, then click the Video Controls drop-down arrow and select any of the options that appear.

Video Controls drop-down arrow.

Keyboard Navigation and Screen Reader Support

Learners can easily navigate the video controls with a keyboard or screen reader. Accessible navigation with a logical focus order is built right into the published output. Simply add a video to your course, enable video controls, and publish!

More Video Controls

We've added more options to the modern player's built-in video controls, giving you greater flexibility in watching video content. Let's explore.

Adjustable Volume Controller

Say hello to the separate adjustable volume controller! This gives learners the option to adjust the video volume when there isn't a volume control on the course player. In desktop browsers, hover over the volume icon and drag the slider to raise or lower the volume. You can also use these keys to control the volume:

  • Enter/Spacebar to toggle audio on and off
  • Home to jump to the lowest volume
  • End to jump to max volume
  • Arrows/Page Up/Page Down to adjust the volume in 10% increments

On mobile devices, use your volume buttons to adjust the volume.

Tips:

  • The color of the seekbar, the check mark icon next to the selected playback speed, and the volume controller are based on the accent color you set in your player properties. Learn more about customizing the modern player.
  • Adjusting the volume controller on the video also adjusts the volume control on the course player, keeping both in sync.

Playback Speed

Need to speed up or slow down the playback speed of a video? We've got you covered. In desktop and tablet browsers, hover over the playback speed icon to choose any speed between 0.25x and 2x. You can also press the left and right arrows on your keyboard to select a speed. On mobile devices, tap the gear icon and then click the playback settings drop-down arrow to cycle through the speed options.

Picture-in-Picture Mode

And there's more! Learners can now watch your video while they interact with a slide, open new browser tabs, or navigate to different apps. Simply click the picture-in-picture button to move the video to a floating window.

With picture-in-picture mode, you can play/pause the video, resize it, and move it around the screen (or to another monitor). To return to normal viewing mode, click the Back to tab button or the X on the floating video.

Picture-in-picture mode is available in desktop browsers that support it—Google Chrome, Microsoft Edge, and Safari. On mobile devices, picture-in-picture mode works in Safari on Apple iOS/iPadOS.

Full-Screen Mode

Full-screen mode for videos is now available, giving learners more viewing room. Click or tap the full-screen button to scale the video to fill the screen. Click it or tap it again to return to normal viewing mode.

Compatibility

Accessible video controls are exclusive to the modern player in the June 2022 update and later for Storyline 360. Project files that use this feature won't open in Storyline 3 or earlier versions of Storyline 360. To restore compatibility, omit the accessible video controls for each video. Click the video placeholder, go to the Options tab on the ribbon, then click the Video Controls drop-down arrow and choose Show none.