Popcorn.js xray goggles plugin.
A tl;dr demo.
The idea is to execute the goggles between a time range, on an element defined by popcorn’s data. In the case of the above demo, I used the video element for testing purposes.
Right now, it is in a demoing state, demoing the use of the goggles at a time range. It is not really in a practical usable state, as you cannot close the goggles, nor can you control the video as they are up; quite frustrating.
I am going to allow popcorn’s data decide what to do with the timing. It can either leave the video playing, pause the video for a set number of seconds, or simply leave the video paused until the user closes and hits play again.
I also need to re add some animation that I avoided for sake of getting it working. Doing this will be good practice for me, because I’ve never been much of a front end guy, but I have the artistic abilities that I just need to dust off.
The hardest part of this was using HTML5′s postMessage. I have never used it before, and was stuck for longer than I would of liked, but long enough to build character. I was attempting to send a postMessage to an iframe before the iframe was done loading, thus the iframe’s event listener was not yet defined, thus my postMessage fell on deaf ears.