Mouse Events

Mouse Events inside WebChimera Player are encoded with JSON and sent from QML to On Page JavaScript through the QmlMessage Event.

! Mouse Events will only work after the "mouseevents" parameter has been set to 1 with .addPlayer()

Event Types

mouseMove: returns "x" and "y" as coordinates for the Cursor Position over the Video Surface.

mouseDoubleClick: triggered when the Mouse Left Button has been Double Clicked.

mouseRightClick: triggered when the Mouse Right Button has been Clicked.

mouseLeftClick: triggered when the Mouse Left Button has been Clicked.

Example Code

HTML

<div style="height: 10%">
    <span id="textbox" style="display:block; padding:5px; background: #ecebeb; color: #333">Mouse Events</span>
</div>

<div id="player_wrapper" style="height: 90%"></div>

JavaScript

wjs("#player_wrapper").addPlayer({ id: "webchimera", theme: "sleek", mouseevents: 1, autoplay: 1 });

wjs("#webchimera").addPlaylist("http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4");

function handleQmlEvents(event) {

    var span = document.getElementById("textbox");
    var QMLobj = JSON.parse(event);

    if (QMLobj["type"] == "mouseMove") {
        span.innerHTML = "Mouse Moved - X: " + QMLobj["x"] + " ; Y: " + QMLobj["y"];
    } else if (QMLobj["type"] == "mouseDoubleClick") {
        span.innerHTML = "Mouse Double Clicked (on Video Surface)";
    } else if (QMLobj["type"] == "mouseRightClick") {
        span.innerHTML = "Mouse Right Clicked (on Video Surface)";
    } else if (QMLobj["type"] == "mouseLeftClick") {
        span.innerHTML = "Mouse Left Clicked (on Video Surface)";
    }
    return;

}

wjs("#webchimera").catchEvent("QmlMessage", handleQmlEvents);