On March 10, 2021, we will be rolling out a major overhaul of the Stream Player. Today, we are releasing the Preview build of the Stream Player 2.0. In this post, I’d like to outline:
- How you can try out the Preview build ahead of the rollout on 3/10/21 and share your feedback
- What improvements you can expect in the Stream Player 2.0
- Why we are phasing out IE 11 support
There will be no breaking changes to the existing Player API.
1. How to try the Stream Player 2.0 Preview Build
To access the Preview build of the Stream Player, take the existing embed code and add a_ flavor=cf _to the querystring. You don’t need to append the querystring to the Player SDK. For an example, see this codepen: https://codepen.io/cfzf/pen/NWbqLNz
Note: We recommend removing flavor=cf from the querystring after March 10, 2021 to avoid unexpected behavior in the future.
Once you’ve had a chance to play with it, you can share your feedback in this thread or via a private message.
2. Major Improvements in the Stream Player 2.0
Unified controls across devices
Users on mobile devices and touchscreen laptops got a different user interface that did not support features such as captions, video quality selection and playback speed selection. This is now solved and we support a unified interface across all browsers.
Note: There are two iOS specific limitations:
- If the user is viewing the video in full-screen, they will see the standard iOS controls. iOS limitations don’t allow the Stream Player to customize the full-screen experience.
- Custom quality selection will not be supported on iOS due to iOS limitations. We are working on potential workarounds for future versions of the player.
The new player supports the following keyboard shortcuts, improving the accessibility for your viewers:
- Left/right arrow keys skip forwards/backwards
- Double tapping left/right sides in the video playback area on mobile skips forwards/backwards (currently not supported on iOS but we will update this thread once we’ve added support)
- Up/down arrow keys turn volume up/down
- M toggles mute
- C toggles captions
- S cycles through playback speeds
- Q cycles through quality options
- 0-9 provide percentage based seeking. e.g. pressing 3 seeks to 30%
Other UI Improvements
Stream Player 2.0 includes UI optimizations to improve the viewer experience. As part of the updates, the Stream Player now infers user intent for showing and hiding controls based on cursor position.
- When the cursor moves over the controls, the timeout before hiding the controls is longer.
- When the cursor moves over the main playback area, the timeout is shorter
- When the cursor moves outside the player entirely, the controls are hidden immediately
We’ve also improved the user feedback when certain interactions cause the player to do something that might not be obvious. We now display an indication to the user in the middle of the player of what happened. e.g. When using the arrow keys to adjust volume or skip.
Finally, the seek bar now continues to seek even if the pointer is dragged outside the player’s window
Between now and March 10, 2021, we may make additional improvements to the player. We’ll update this post as we make these improvements to the Preview build.
3. Why we are phasing out IE 11 support
We decided to phase out IE 11 support based on the following considerations:
- By our estimate, less than 0.50% of views are from IE 11.
- Microsoft recently announced that it will be upgrading old IE browsers to Microsoft Edge, a browser that will be supported by the new player. This should further reduce overall IE 11 usage.
- By phasing out IE 11, we can use more modern browser features without the overhead associated with IE 11-specific workarounds
We’d love your feedback!
We’d love for you to try the Preview build and share your feedback in this thread or via a private message. Where possible, please include the operating system and browser versions along with any relevant screenshots and steps to reproduce issues to help us troubleshoot potential issues faster.