Introduction

THEOplayer allows you to control the player through a context menu when you right-click the player. This provides you quick access to common actions such as play, pause or mute.

You can easily customize the context menu by configuring additional menu items in THEOplayer's configuration. This allows you to add your company's name to the menu, or provide links to related pages on your company's website.

Configuration

Basic Configuration

This feature can be configured by adding a menu item definition to the contextMenu configuration parameter. A menu item is defined by a JavaScript object with the following attributes:

AttributeRequiredDescription
text   Text to display on the menu item.
url (optional) URL to open when the menu item is clicked.
className (optional) CSS classes to add to the menu item.
theoplayer = {
    configuration: {
        contextMenu: {
            text : "My Example Website"
        }
    }
}

Advanced Configuration

You can add multiple menu items by defining them as a JavaScript array.

theoplayer = {
    configuration: {
        contextMenu: [{
            text: "My Example Website",
            className: "my-context-menu-branding"
        },
        {
            text: "Send feedback",
            url: "/contact.html",
            className: "my-context-menu-feedback"
        }]
    }
}

Example

The following example shows a THEOplayer with custom context menu items, styled with custom CSS. Right-click the player to open the context menu.

.theoplayer .my-context-menu-branding {
    font-weight: bold;
    color: #fa0;
}

Support Table

This feature is supported on all browsers supported by THEOplayer.

Internet Explorer 10+

Internet Explorer 10+

Firefox

Firefox

Chrome

Chrome

Safari

Safari

Opera

Opera

Edge

Edge

Windows Phone

Windows Phone

Android

Android

iOS

iOS

Vivaldi

Vivaldi