Follow

Popcorn.js and Conducttr

Below is some sample working code. Paste into http://jsbin.com to play with it and replace the variable myLocation with your own API URL. You'll need an API trigger with matchphrase including unauth/

You can use this simple ping to count how many viewers watched though to 5 seconds into the video.

<!doctype html>

<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {

// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
var myLocation = 'https://api.tstoryteller.com/v1/project/394/unauth/popcorn_1?consumer_key=3054f462d14a0f540c276ae9__________1900a0c';

// ping URL at 5 seconds

pop.code({
start: 5,
end: 60,
onStart: function loadUrl()
{
Popcorn.getJSONP(
myLocation,
function( data ) {
/*
`data` will be the parsed json object

*/
}
);;
}
});

// play the video right away
pop.play();

}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments