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