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

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (9)

Similar to Video synced interactive web visualisations

Similar to Video synced interactive web visualisations (20)

Recently uploaded

Recently uploaded (20)

Video synced interactive web visualisations