HTML5 Plugin: handling events

With HTML5 Plugin you can control the web page that is being displayed. In addition to simple things like scrolling and navigating web pages sourced from the Internet, there are a few other things that events can be used for:

• design animated sequences by changing the position of the items on each frame;
• display frame service information;
• display "See next" sections by handling the host events on playlist played item change;
• pass an image from the plugin to the page.

Since the DirectX11 and CEF are working in the same window process the mouse events [moving/click/scroll] are not raising. To have the mouse events we should set to MPreview object the dx11.windowless=true property in the registry.

\HKEY_CURRENT_USER\Software\Medialooks\MPlatform\MPreview
dx11.windowless=true

Handling the OnFrame events

This event raises on each frame that goes through the HTML plugin. To handle the OnFrame event you should subscribe to the event with the cef_plugin.set_on_frame function call and handle it with your custom javascript function. The plugin will perform your function call on each frame.

Here is a javascript function template for OnFrame handling:

function on_frame_my(info) { }

Here, "info" is a service structure that contains the frame time, timecode and video format information. You can use cef_plugin.parse_parameters service function to parse this structure and get the object with info.time, info.timecode and info.vid_props fields.

Here is a code sample that shows the handling of OnFrame events and displaying the frame service information:

// Subscribe to OnFrame event 
cef_plugin.set_on_frame('on_frame_my'); 

// Handle the OnFrame event 
function on_frame_my(info)
{
    if (!frame_info || !frame_info.length)
    return;

    // Parse the frame information
    var obj = (info);

    // Display the frame timecode
    var tcDiv = document.getElementById('tc_div');
    tcDiv.innerHTML = obj.timecode;

    // Display the video properties
    var vidDiv = document.getElementById('vid_div');
    vidDiv.innerHTML = obj.time + "<br/>" + obj.vid_props;
}

Handling the OnEvent events

This event raises a custom event of the plugin or its host object. The OnEvent event handling is quite similar to the OnFrame event handling. You should subscribe it to the cef_plugin.set_on_event function call. The plugin will perform your function call on each object event, for example on the playlist item switch.

Here is a javascript function template for OnEvent handling:

function on_event_my(event_channel, event_name, event_param, event_object) { }

In this example:

"event_channel" - the event channel Id.
"event_name" - the event name parameter. For example, "switch" for the playlist switch event.
"event_param" - the special event parameters. For example, "to" for the playlist switch event - a file that is switched to.
"event_object" - the object that raised the event.

Here is a code sample that demonstrates handling OnEvent events, monitoring the playlist item switch and displaying the next item information:

// Subscribe to OnEvent event 
cef_plugin.set_on_event('on_event_my');

// Handle the OnEvent event 
function on_event_my(event_channel, event_name, event_param, event_object) {

// Display the event information 
var eventDiv = document.getElementById('event_div'); 
eventDiv.innerHTML = 'Event(' + event_channel + '): Name:' + event_name + ' Param:' + event_param + ' Obj:' + event_object;

// Get and display the properties of currently played file in a playlist 
var propDiv = document.getElementById('prop_div'); 
var properties = cef_plugin.props_get("host::current::file::info"); 
propDiv.innerHTML = "<b>Current File: </b><br />" + escapeHtml(properties);

// Get and display the properties of next file in a playlist 
var propNextDiv = document.getElementById('prop_next_div'); 
properties = cef_plugin.props_get("host::next::file::info"); 
propNextDiv.innerHTML = "<b>Next File: </b><br />" + escapeHtml(properties); 
}

Handling the OnImage events

This event raises when the image is passed from the HTML display plugin to the page. To handle the OnImage event you should subscribe to the event with the cef_plugin.set_on_image function call and handle it with your custom javascript function. The plugin will perform your function call on each frame.

Here is a javascript function template for OnImage handling:

function on_image_my(image_name, image_data) { }

In this example:

"image_name" - the image name.
"image_data" - the image data structure that contains the image data, like height, width, and the image itself.

Here is a code sample that demonstrates handling the OnImage event and displaying the received image:

// Subscribe to OnImage event 
cef_plugin.set_on_image('on_image_my');

// Handle the OnImage event 
function on_image_my(image_name, image_data) { 
// Log the image data 
console.log("on_image_my: " + image_name + " w=" + image_data.width + " h=" + image_data.height + " cb=" + image_data.data.length);

// Put the image data 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.putImageData(image_data,0,0);

// Draw the image 
ctx.drawImage(cnv_scale, 0, 0, c.width, c.height); 
}

Handling the JS events

You can also handle events from JavaScript with

cef_plugin.put_event( "channel", "event_name", "event_param" );

f.e. add this code to our demo.html page:

function putevent() {
  cef_plugin.put_event( "channel", "event_name", "event_param" ); 
}
setTimeout(putevent, 10000);

and then you can catch this event with the m_objOverlayHTML_OnEventSafe default handler