Menu

Context menu

thisPlayer provides opportunity to have custom context menu and control it 100%. use contextMenuItems property to create custom context menu with items you need. Also there is availability to set custom click callback for each custom menu item. See the example below:

var tp = thisPlayer({
    container: '#player-container',
    resources: '/your-folder/your-video.mp4',
    contextMenuItems: [ // Array to wrap each menu item
        { // a menu item object
            id: 1, // a unique id of menu item - can be string or integer
            html: 'Copy video url', // label of menu item, it can be html code or pure text
            onClick: function(e, tp){ // click function of menu item. you can write custom code inside.
                //function arguments: [e] is click event object and [tp] current thisPlayer object (this).
                //custom code here
            }
        },
        { // another menu item object
            id: 'two', // a unique id of menu item - can be string or integer
            html: 'Share on Facebook', // label of menu item, it can be html code or pure text
            onClick: function(e, tp){ // click function of menu item. you can write custom code inside.
                //function arguments: [e] is click event object and [tp] is current thisPlayer object (this).
                //custom code here
            }
        }
        { // another menu item object
            id: 3, // a unique id of menu item - can be string or integer
            html: 'Loop', // label of menu item, it can be html code or pure text
            onClick: function(e, tp){ // click function of menu item. you can write custom code inside.
                tp.loopState = true;
                //function arguments: [e] is click event object and [tp] is current thisPlayer object (this).
                //custom code here
        }
    ]
    // you can have more context menu items.
});

If you do not need custom context menu you can set contextMenuItems: false to disable it. Also default value is false as well.

When context menu toggles - Event

An event contextmenu is firing when context menu shows or hides. It provides an event argument in callback function. According the code snippet above tp is an instance of thisPlayer. So lets attache contextmenu event to it in code example below:

tp.on('contextmenu', function(e){
    // [e] is an event argument of callback function
});

As you can see it is pretty easy to create custom context menu with thisPlayer. So hve fun!