HTML5 Plugin: handling events

Our HTML5 Plugin allows to control the web page that is being displayed on top of the video. This post explains how this can be done and what you can use it for.

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.

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 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.timeinfo.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 on a custom event of the plugin or it's host object. The OnEvent event handling is quite similar to the OnFrame event handling. All you need to so is 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 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 = '<b>Event(' + event_channel + '):</b><br/>Name:' + event_name + '<br>Param:' + event_param + '<br>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 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 image itself. 

Here is a code sample that demonstrates handling 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); 
}

You can try handling events with the MPlatform Sample Playlist application: