split.html

<!DOCTYPE HTML>
<html>
<head>
<title>Split</title>
<style type="text/css">
body { background: white; font-family: sans-serif; color: #888; margin: 0;}
video { width: 500px; }
header { font-size: 64pt; padding: 20px;} 
#main { position: relative; margin-top: 75px; padding-left: 200px; }
#side { position: absolute; top 0; right: 0; width: 300px; height: 100%; background: #aaa; }
#annotation { font-size: 1.5em; }
.plugin { color: black;  }
#wikipedia { height: 300px; overflow-y: scroll; border: 1px solid #999; padding: 5px;}
#image { margin-top: 15px; padding: 8px; } 
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.js"></script>
<script>
//make sure DOM is loaded
$(document).ready(function () {

    //make popcorn object
    var p = Popcorn("#video");
    p.play();
    //example footnote
    p.footnote({
        start: 1,
        end: 15,
        text: 'an annotation...',
        target: "annotation"
    }); //end footnote
    p.footnote({
        start: 16,
        end: 40,
        text: 'another annotation...',
        target: "annotation"
    }); //end footnote
    //example image
    p.image({
        start: 1,
        end: 40,
        target: 'image',
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Combination_of_October_2011_global_protests.jpg/260px-Combination_of_October_2011_global_protests.jpg'
    }); //end image

    //example wikipedia entry NOTE REQUIRES RUNNING FROM ACTUAL SERVER DUE TO JSONP STUFF
    p.wikipedia({
        start: 1,
        end: 25,
        title: "UC Davis Pepper-spray incident",
        src: "http://en.wikipedia.org/wiki/UC_Davis_pepper-spray_incident",
        target: "wikipedia"
    }); //end wikipedia
    //another wikipedia  
    p.wikipedia({
        start: 26,
        end: 41,
        title: "Linda P.B. Katehi",
        src: "http://en.wikipedia.org/wiki/Linda_P.B._Katehi",
        target: "wikipedia"
    }); //end wikpedia
}); // end ready
   
</script>
</head>
<body><section id="side">&nbsp;
<div id="wikipedia" class="plugin"></div>
<div id="image" class="plugin"> </div>

</section>

<header>A title...</header>
<section id="main">
<video id="video"" controls>
    <source src="http://metaviddemo01.ucsc.edu/rashomon/media/Occupy_Wall_Street_Cops_Pepper_Spray_UC_Davis_Protesters-MYQqiyR2THs.webm">
    <source src="http://metaviddemo01.ucsc.edu/rashomon/media/Occupy_Wall_Street_Cops_Pepper_Spray_UC_Davis_Protesters-MYQqiyR2THs.mp4">
</video>
<h3 id="title">A description...</h3>
<div id="annotation"> </div>
</section>


</body>
</html>