Authors

Video Tutorials

Storyline 360: Choosing a Player Style (Modern or Classic)

The player is the frame around your slide content that holds navigation features, such as the menu and seekbar. In Storyline 360, you can choose the classic or modern player. Here's how.

Switching Between the Modern and Classic Player Styles

You can switch between the modern and classic players. Go to the Home tab on the ribbon, click Player, then choose a style from the Player Style drop-down list.

New projects automatically use the modern player, but you can switch to the classic player.

Projects created before the modern player was introduced will continue to use the classic player, but you can switch to the modern player at any time.

Comparing the Modern and Classic Player Styles

We’ll explore the modern and classic player styles below, and this article provides more details.

How Modern and Classic Players Look

The modern player gives desktop and mobile learners a unified experience that’s consistent across all devices, while the classic player looks different on desktop computers and mobile devices.

The modern player also makes customizing colors easy. Select a built-in theme or create your own theme, then choose an accent color from the color selector. The classic player requires more effort for color customization.

How They Behave on Mobile Devices and Desktop Computers

Both player styles are responsive on tablets and smartphones, giving learners the best viewing experience on every screen size and orientation. The sidebar collapses, browser chrome is eliminated, and player controls are mobile-friendly. This gives your slide content more room to shine.

On desktop computers, the modern player scales smoothly to completely fill learners’ browsers by default, while the classic player doesn’t. Both player styles have the option to lock the player size or let it adjust to learners' browsers.

How the Player Features Work

The modern player style boasts more exclusive player features, as described below.

Modern Player

Classic Player

Enable or disable the play/pause button and seekbar independently.

Enable or disable the play/pause button and seekbar as a single unit.

Make the seekbar conditional so learners can't skip ahead until they've completed each slide.

The classic player doesn't have a conditional seekbar.

The seekbar appears across the bottom of the screen on all devices and orientations except smartphones in landscape mode.

On smartphones in landscape mode, the seekbar is a circular indicator that travels around the play/pause button. When a slide is paused or it finishes playing, the seekbar changes to a line across the bottom of the screen.

The seekbar appears across the bottom of the screen on desktop computers and tablets/smartphones in portrait mode.

The seekbar is a circular indicator that travels around the play/pause button on tablets and smartphones in landscape mode.

The logo appears on desktop computers and tablet devices. Due to limited screen real estate, it doesn't show on smartphones.

You can add alt text to your logo so it's accessible to screen readers and other assistive technologies.

The logo appears on desktop computers but not tablets or smartphones.

The classic player doesn't support logo alt text.

You can choose to collapse the sidebar by default, allowing learners to expand it when they need it. On small screens, the sidebar automatically collapses to give your content more room.

The sidebar is always expanded on desktop and laptop computers. It’s always collapsed on mobile devices.

Topbar tabs are always on the side of the player opposite the sidebar. If your sidebar is on the left, your topbar tabs are on the right. And if your sidebar is on the right, your topbar tabs move to the left.

On small screens where there isn’t enough room to display topbar tabs, they’ll collapse into a drop-down menu represented by three dots. To see your topbar tabs, click the dots.

You can have topbar tabs on both the right and left sides of the player.

On tablets and smartphones, topbar tabs automatically collapse into the responsive mobile player. To see your topbar tabs, just click the menu icon (☰).

Quickly turn off all modern player features for a chromeless look by flipping a switch.

Turning off all player features for a chromeless design takes more work than the modern player. Details here.

Choose a style for navigation buttons. Previous, next, and submit buttons can be icons, text, or both icons and text. Due to limited space on smartphones, they’ll always be icons

On desktop and laptop computers, navigation buttons are always text. On tablets and smartphones, they’re always icons.

By default, the modern player scales smoothly to completely fill learners’ browsers on every device and screen size. You also have the option to lock the player size or let it adjust to learners' browsers. Details here.

Plus, you can add a player toggle to let learners view courses in full-screen mode.

You can only lock the player size or let it adjust to learners’ browsers. Details here.

Let learners explore at their own pace by choosing a course playback speed between 0.25x and 2x.

The classic player doesn't support speed control.

The light and dark themes of the modern player meet and exceed WCAG Level AA guidelines for visual contrast and color by default. Details here.

Or, you can define a custom background and accent color instead.

You can make the classic player meet contrast guidelines by manually customizing the colors of each player component. Choose colors with a contrast ratio of 4.5:1 or higher.

Customize your course start page with an image.

The classic player doesn’t support cover photos. However, the course start page matches the top and bottom colors you set for Base>Main Background.

Increase or decrease the font size for closed captions and player features independently.

You can also choose the foreground and background colors and placement of your captions.

Increase or decrease the font size for closed captions and player features as a single unit.

Choose two colors—one light and one dark—for the accessibility focus indicator so it's visible against any background.

Choose a single color for the focus rectangle.

If your course has background audio, learners can turn it on or off via the accessibility controls.

The classic player supports accessibility controls. However, it doesn't support background audio.

All modern player features are supported on desktop computers and mobile devices.

All classic player features are supported on desktop computers, and most are supported on mobile devices.

 

Updated 4 months ago
Version 7.0