HTML5 Plugin: using properties to pass information to page

The HTML Plugin uses properties to share information with and to control the web page.

Getting and setting the properties on a page

There are 2 JavaScript functions that you can use to get and set properties similar to PropsGet and PropsSet methods of IMProps interface of Medialooks objects: cef_plugin.get_prop and cef_plugin.set_prop.

You can call them on the page to get and set properties: 

 // Get current page vertical scroll speed  
var scrollSpeed = cef_plugin.props_get('scroll.speed_v'); 

// Change the page vertical scroll speed value 
cef_plugin.props_set('scroll.speed_v', '10');

Types of properties

There are several types of properties available on the page.

1. Original plugin properties

For example, 'scroll.speed_h', 'scroll.speed_v' etc. Check the plugin properties table to get the list of available properties.

2. Custom plugin properties

In addition to the original plugin properties you can specify custom properties for the plugin using PropsSet method and get them on the page. Here is a C# code sample that you can call in your application to set the custom property for your plugin:

// Specify a custom property for the plugin
m_objOverlayHTML.PropsSet("my_page_caption", "Some cool caption");

And here is a JavaScript code that you call on the page to get the custom property:

// Get the custom property on the page   
var customPageCaption = cef_plugin.props_get('my_page_caption'); 

3. Plugin host properties

You can go deeper and get the properties of the plugin host. The host is the object that HTML plugin is added to. For example, MPlaylist object of you add the plugin to it. In combination with events handling the host properties will help you to get and display special information, like "See next" for the next file in a playlist. 
To get the host properties you should use a special "host" keyword. Except for the "host" keyword, there are few special keywords for the MPlaylsit object:

  • "host::current" - the current playlist item;
  • "host::next" - the next playlist item;
  • "host::background" - the playlist background.

Here is a code sample: 

// Get the information about the next file in a playlist. 
var properties = cef_plugin.props_get("host::next::file::info");

Try passing properties to the page with the MPlatform Sample Playlist application: