Storyline 360: Introducing the Modern Player

Article Last Updated May 22, 2018

This article applies to:

In Storyline, the player is the frame around your slide content. It holds navigation features, such as the menu, seekbar, and previous and next buttons. And now, exclusively in Storyline 360, you can choose the classic player or the all-new modern player.

The modern player gives desktop and mobile learners a fresh, unified experience that’s consistent across all devices. It scales smoothly to fill learners’ browsers on every screen, large and small. And it's easy to customize.

Here’s an example of how the modern and classic players compare on computers and mobile devices. Click each image to enlarge it.

Modern Player

Classic Player

Desktops & Laptops

Desktops & Laptops

Tablets

Tablets

Smartphones

Smartphones

We made it easy to switch to the modern player and customize its settings. Watch this video demonstration, then check out the details below.

  1. Switch to the Modern Player Style
  2. Choose Player Features
  3. Customize the Player Colors
  4. Switch to the Modern Feedback Style
  5. Publish HTML5-Only Output for Every Device

Switch to the Modern Player Style

New Storyline projects automatically use the modern player, so all you need to do is choose the features you want to include and customize the settings. See the Storyline 360 user guide for details.

Existing projects will continue to use the classic player by default, but you can switch to the modern player at any time. Go to the Home tab on the Storyline ribbon, click Player, then use the Player Style drop-down list to choose Modern. And if you want to switch back to the classic player, you can do that just as easily.

Choose Player Features

Player features are mostly the same whether you choose the modern player or the classic player, but there are a few differences, as described in this table.

Modern Player

Classic Player

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.

And 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. Just click the dots to see your topbar tabs.

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. Just click the menu icon (☰) to see your topbar tabs.

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

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

The seekbar appears across the bottom of the screen on all devices and orientations except on 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.

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

You can turn off all player features for a chromeless look. It just 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. (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.

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, which is the same as your slide dimensions plus a little extra for the player controls.

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. See this interactive demo to know which classic player features work on tablets and smartphones.

Learn how to customize all the player settings in the Storyline 360 user guide.

Tip: Go Chromeless

Want to turn off all the player features for a chromeless design? With the modern player, it’s easy to do. Just open the player properties and set the Menus & Controls option to Off. That’s it!

Your course won’t have a player at all. You’ll just see a black or white background behind your course, depending on the player theme you choose. And since the slides in your course won’t have navigation buttons, be sure to add your own custom navigation features to each slide.

You can make the classic player chromeless too. It just takes more work. You’ll need to turn off each player feature individually, turn off the previous and next buttons for each slide in the course, and make the player border transparent. Here’s how.

Customize the Player Colors

The modern player style makes customizing colors super easy. Just select a dark or light theme, then choose an accent color from the color selector (the default accent color choices come from your theme colors).

The neutral tones of the dark and light themes allow your content to be the focus of learners’ attention, while the player performs a supporting role in the background. And the accent color is used throughout the modern player to tie it all together. For example, the accent color highlights the current slide in the menu, identifies the selected tab in the sidebar, and shows the progress of the seekbar.

Switch to the Modern Feedback Style

The modern player includes an updated, modern feedback style for quiz questions. New Storyline projects automatically use the modern feedback style, so all you need to do is enter your feedback text.

Here’s an example of how the modern and classic feedback styles compare.

Modern Feedback

Classic Feedback

Existing projects will continue to use the classic feedback style by default, but you can switch to modern feedback at any time. Here’s how:

  1. Go to the View tab on the Storyline ribbon and click Feedback Master.
  2. Click Insert Slide Master on the ribbon. A new feedback master with several layouts will appear in the left navigation pane.
  3. It’s a good idea to give your feedback master a recognizable name. To do that, right-click the new feedback master in the left navigation pane (it should already be selected), then click Rename Master.
  4. Enter a name for your feedback master and click Rename. For example, you might call it Modern.
  5. Click Close Master View on the ribbon.
  6. Go to a quiz slide in your course and select a feedback layer, then go to the Question panel and select your new feedback master from the Feedback Master drop-down list.
  7. Repeat step 6 for each feedback layer on each quiz slide in your course.

Want to see a demonstration of this process? Check out this video.

Publish HTML5-Only Output for Every Device

When you publish courses with the modern player, you’ll get HTML5-only output that works beautifully in all major browsers on desktop computers and mobile devices.

Courses that use the modern player don’t have any Flash content, so they’ll continue to work when browsers stop supporting Flash. (If you need Flash output, just switch to the classic player, and then publish your course.)