Video synced interactive web visualisations

Video Synced
Interactive Web Visualisations
In a search for new ways of making teaching web resources even more engaging
we implemented a combination of JavaScript libraries (Popcorn.js, D3.js and JSmol)
to create examples of interactive web visualisations synced with video presentations.
Nikodem Miranowicz http://www.nottingham.ac.uk/~uiznm/

Task:
synchronise video with interactive data representation

Code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=“style.css" />
<script type="text/javascript“ src="JSmol.min.js"></script>
</head>
<body>
<div id="container">
<div id="video_panel">
<video id="video">
<source type="video/webm" src="video/Capture.webm" />
<source type="video/ogg" src="video/Capture.ogv" />
<source type="video/mp4" src="video/Capture.mp4" />
</video>
</div>
<div id="app_panel">
<script type="text/javascript“ src="Model_setup.js"> </script>
</div>
</div>
</body>
</html>
<script src="popcorn.js"></script>
<script src="popcorn.jsmol.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded"
, function () {
var popcorn = Popcorn("#video");
popcorn.jsmol({
start: 2,
jsmol: 'load data/caffeine.mol'
});
popcorn.jsmol({
start: 14.50,
jsmol: 'set spinY -140;spin on'
});
popcorn.jsmol({
start: 19.0,
jsmol: 'spacefill only'
});
popcorn.jsmol({
start: 36,
jsmol: 'zap'
});
popcorn.play();
}, false);
</script>

Plugin // PLUGIN: jsmol
(function (Popcorn) {
var jumps = Array();
Popcorn.plugin("jsmol", {
manifest: {
about: {
name: "Popcorn JSmol Plugin",
version: "1.0",
author: "Nikodem Miranowicz",
},
options: {
start: {
elem: "input",
type: "text",
label: "Start"
},
jsmol: {
elem: "input",
type: "text",
label: "JSmol"
}
}
},
start: function (event, options) {
Popcorn.instances.forEach(function (video) {
if (typeof(options.jsmol)!='undefined') {
Jmol.script(jmolApplet0,options.jsmol)
}
});
}
});
})(Popcorn);

1. JSmol
Molecular structure representations

2. D3.js
Data Driven Documents

4. Video
Structural Interactivity

Video Synced
Interactive Web Visualisations
Nikodem Miranowicz
http://www.nottingham.ac.uk/~uiznm/

Video synced interactive web visualisations

More Related Content

What's hot

Viewers also liked

Recently uploaded

Video synced interactive web visualisations