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

Switching Between the Modern and Classic Player Styles

We made it easy to switch between the modern and classic players.  Just go to the Home tab on the Storyline 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 if you’d like.

Projects that were 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 briefly compare the modern and classic player styles here, and you can find more details in this article.

How Modern and Classic Players Look

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

And when it comes to customizing colors, the modern player makes it super easy. Just select the built-in dark or light theme, or create your own theme. Then choose an accent color from the color selector. It takes more work to customize colors in the classic player. Details here.

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; the classic player doesn’t. Learn more.

How the Player Features Work

Player features are mostly the same whether you choose the modern player or the classic player, but there are a few differences, as described below. Learn more.

Modern Player

Classic Player

You can choose to collapse the sidebar by default, allowing learners to expand it when they need it.

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.

You can have topbar tabs on the right and left sides of the 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. Learn more.

The classic player doesn't have a conditional seekbar.

The logo appears on desktop computers and tablet devices. It doesn't show on smartphones due to limited screen real estate. And you can add alt text to the logo.

The logo appears on desktop computers but not tablets or smartphones and doesn't support alt text.

Quickly turn off all player features for a chromeless design by flipping a switch. Details here.

You can turn off all player features for a chromeless design. It just takes more work than the modern player. Details here.

Choose a style for navigation buttons: icons, text, or both icons and text.

On desktop computers, navigation buttons are always text. On mobile devices, they’re always icons.

The modern player always scales smoothly to completely fill the learner’s browser on every device and screen size.

You can control the player size. Let it fill the learner’s browser or lock it at optimal size. Learn more.

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

Or, use a custom background and accent color instead. Details here.

The classic player can meet accessible contrast. Be sure to choose colors with a contrast ratio of 4.5:1 or higher.

Customize your course start page with an image. Details here.

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.

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.

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.

 

Related Content