forked from jaruba/WebChimeraPlayerNW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mouse_events.html
57 lines (42 loc) · 1.87 KB
/
mouse_events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.webchimera.org/favicon.ico">
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>JS Mouse Events Demo - WebChimera Player</title>
</head>
<body>
<div id="close_wrapper"><a id="close_button" href="index.html"><img src="images/close_but.png"></a></div>
<div id="page_title"><h1>JS Mouse Events Demo</h1></div>
<div id="player_wrapper" style="background: #141414">
<div style="height: 10%"><span id="textbox" style="display:block; padding:5px; background: #ecebeb; color: #333">Mouse Events</span></div>
<div id="wrapper" style="height: 90%"></div>
</div>
<script src="player/webchimera.js" type="text/javascript"></script>
<script>
// create player with Mouse Events enabled
wjs("#wrapper").addPlayer({ id: "webchimera", theme: "sleek", mouseevents: 1, autoplay: 1 });
// add video url
wjs("#webchimera").addPlaylist("http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4");
// event callback function for QML Message
function handleQmlEvents(event) {
// change text from "textbox" with event values
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;
}
// register QML Message callback
wjs("#webchimera").catchEvent("QmlMessage", handleQmlEvents);
</script>
</body>
</html>