Announcing the Preview build for Stream Player 2.0

Hi all,

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:

  1. How you can try out the Preview build ahead of the rollout on 3/10/21 and share your feedback
  2. What improvements you can expect in the Stream Player 2.0
  3. 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.

Keyboard Shortcuts

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

Further Improvements

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.

5 Likes

Hello Zaid

Nice to see that you will have a new player! I have tested a demo player on my safari browser v.11.1 skipping foreward fonction does not work. When I click on some point in timeline, nothin happens. On old version of the player, with same Safari browser, I do not have that problem. Kind regards, Ocean

This is great and we’d like to start evaluating and testing this…However, we use the embed script for our videos…is there a different embed script version we can use that will utilize 2.0? I tried adding flavor=cf to the end of the script but that obviously didn’t work…Appreciate any insight!

@steve.shallman check out the codepen Zaid linked above. It has an example embed code you can test with. There is nothing you need to use to start using 2.0, existing players will start using it at around March 10

Hey @user2553 is it possible that you send a video of it not working on your browser to [email protected]? I was not able to replicate this issue and I wonder if there is anything special you’re doing that may be causing this issue to occur.

Hello Renan, when I play video displayed on the following URL https://codepen.io/cfzf/pen/NWbqLNz in my Safari browser, skipping forward does not work. I’ve made a copy of the code here: supportmac.fr. I’m unable to scroll with the cursor in safari browser.

Hi!
Im using the official react package at GitHub - cloudflare/stream-react
Will there be an update for this package for Stream player 2.0? Or is an update not necessary?

Thanks in advance,

@Jarlen_dev no package upgrades will be necessary within your application to get the new version!

3 Likes

Thanks a lot for this!
When can we expect this to be fully released? It would be grand if we could use this on the React Stream Component.

Edit: Is there any way to customize the subtitle’s background color on the new player? In the last player there were a bit darker.

2 Likes

We don’t have an exact ETA but we expect the React Stream component to use Stream Player 2.0 some point next month.

Good suggestion re: subtitle background color. This is not supported at the moment but we will consider adding support for it in future.

2 Likes

what url should we use to ref the new script?
https://embed.videodelivery.net/embed/sdk-iframe-integration.rn2k.latest.js ?

@anthony22 the new player is currently available via the recommended iframe embed, and will be available to the legacy <stream /> embeds some time in mid April.

1 Like

Are there any plans to add native previews of the scene when scrubbing over the video?

I just want to mention that the following error appears in the browser console:
Uncaught TypeError: o.hookBeacon is not a function

1 Like

I too have noticed this console error … Uncaught TypeError: o.hookBeacon is not a function – Please advise on resolving this console error. thanks!

I noticed that the react component was updated three days ago. Will the angular component get an update as well?

@kkipp , I noticed that you said that package upgrades would not be necessary for react apps to get the new version. I assume the same applies to the angular apps?

Any ETA for when the switch will automatically happen?

Hey @dag1!

The new player should be live for all embeds now! Please let us know if you encounter any issues.

3 Likes

Thanks for the update! Did a quick test. So far so good!

Hi!
We are using the react component. Since a couple of hours ago the duration property on the streamRef element returns undefined.
This results in our implementation of the Cloudflare player being practically broken, in production, impacting hundreds of users.

I’ve tried updating the react-component to v1.0.0 but it makes no difference. Has support for this been removed? Or have i missed something? Duration is still shown as a property on Stream Player API · Cloudflare Stream docs
which StreamRef is supposed to grant access to, no?

Whats going on?
If someone could shed some light on this, that would be incredibly helpful, thanks.