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!
