Popcorn.js xray goggles plugin.

On and off this week I have been fruitfully fumbling my way around the Hackasaurus xray goggles bookmarklet, in an attempt to use them in a popcorn plugin, while other things brew.

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.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: