Custom context menu in stream player

Developers Stream
1

Hi everyone,

Is there any way to change or custom CloudFlare stream player context menu? I search everywhere but seems like CF stream player documents are lack of info.

image
image1238Ă—790 177 KB

I want to change Copy Video Id to other text or fully custom the menu to what I want, background colour for example.

Thanks for help

1 Like
2

To hide this, I found a way.

$('.video-preview').contextmenu(function(){
    $('.cf-stream-menu-container').hide();
});
3

Is there any way to get this working in 2021? I tried to add a script on the embedding page but none if these worked.

<script>
    window.addEventListener(
        "contextmenu",
        function (e) {
            // do something here...
            e.preventDefault();
        },
        false
    );
    document.getElementById("content").addEventListener(
        "contextmenu",
        function (e) {
            // do something here...
            e.preventDefault();
        },
        false
    );
    document.getElementById("player-wrapper").addEventListener(
        "contextmenu",
        function (e) {
            // do something here...
            e.preventDefault();
        },
        false
    );
    const elements = document.getElementsByClassName("cf-stream-menu");
    elements[0].addEventListener(
        "contextmenu",
        function (e) {
            // do something here...
            e.preventDefault();
        },
        false
    );
</script>

I also tried to hide them via CSS but I also had no success.

4

We’ll be removing the context menu shortly in the new player version so users can decide what to do with the context menu over the player iframe element.

5

Thanks for the update on this topic and the link to the new player version! Didn’t know about that, yet.

6

@renan Do you have any information when the context menu will be removed?

It would also be very nice if you could help me adding some custom menu items if possible. This is my new thread asking about this.

1 Like
7

@dundl if you’re using the new player, it should already be gone. We’re still continuing deployment of the new player to everyone so everybody will get it by around April 15th.

1 Like
8

Thank you very much for the update!

1 Like
9

@renan The context menu is gone but the menu items are now displayed when clicking on the “settings” (gear icon).

Is there a way to create my own menu items? (and ideally remove the existing menu items)

I already tried to remove the whole settings icon with the following code:
document.getElementById(“menu-button–menu–2”).style.display = “none”;

But it didn’t work with the following error code:
TypeError: document.getElementById(…) is null

This would only remove this icon and doesn’t solve my problem but I wanted to mention that I tried something :grin:

By the way: Have a nice easter holiday! :rabbit:

10

@dundl Hey thank you! Have a nice easter as well!

We don’t let you change user interface elements on the player we provide like adding or removing buttons. However, we allow you to remove the UI completely and build your own UI using the player API.

Alternatively, you can use the DASH URL in the API (click view JSON button in the dashboard to get this URL) to make your own player. You can use open source players that support like Video.js, DASH.js or Shaka Player and build your UI that way.

Possibilities are endless by doing a making your own user interface.

1 Like