Skip to content

Instantly share code, notes, and snippets.

@netj
Created July 28, 2012 06:31
Show Gist options
  • Save netj/3192098 to your computer and use it in GitHub Desktop.
Save netj/3192098 to your computer and use it in GitHub Desktop.
Pop Web Video — Pop the video playing on this web page into an exactly-sized window.
/* Created with YouScript Bookmarklet Editor
* http://netj.github.com/youscript/
*/
var minWidth = 300; var minHeight = 200;
function getVideoElement(w) {
// find the HTML5 video, or other likely video containers
if (!w || !w.document || !w.document.getElementsByTagName) return null;
function findVideoElementFrom(vs) {
for (var i=0; i<vs.length; i++) {
var v = vs[i];
// find an element that is large enough
if (v && v.offsetWidth >= minWidth && v.offsetHeight >= minHeight)
return v;
}
return null;
}
var v = null;
v = v || findVideoElementFrom(w.document.getElementsByTagName("video"));
v = v || findVideoElementFrom(w.document.getElementsByTagName("embed"));
v = v || findVideoElementFrom(w.document.getElementsByTagName("object"));
if (v) return v;
// also search frames
for (var i=0; i<w.frames.length; i++) {
v = getVideoElement(w.frames[i]);
if (v) return v;
}
return null;
}
var v = getVideoElement(window);
if (v) {
console.log("popping up video...", v);
// try to pause and get the current playing time
var t, min, sec;
try {
v.pause();
t=v.currentTime;
min=Math.floor(t/60);
sec=t-60*min;
console.log("video paused at "+min+":"+sec+".");
} catch(err) {}
// open a popup window
var w=open(v.ownerDocument.documentURI, null, "menubar=0,toolbar=0,location=0,status=0,width="+v.offsetWidth+",height="+v.offsetHeight);
var tries=0;
w.addEventListener("load", function resumeVideo(){
var popv = getVideoElement(w);
console.log("locating video from the popup window...", v);
if (!popv || v.id && v.id != popv.id || v.className && v.className != popv.className) {
if (tries++<10) return setTimeout(resumeVideo, 100);
else return setTimeout(resumeVideo, 1000);
}
popv.scrollIntoView(true);
// XXX .scrollIntoView() does not take care of scrollLeft :(
function getAbsLeft(e){
if (e == null || e === document.body) return 0;
else return e.offsetLeft + getAbsLeft(e.offsetParent);
}
w.document.body.scrollLeft = getAbsLeft(popv);
// XXX remove the disturbing YouTube feedback icon that occludes the fullscreen button when used with ClickToPlugin
var x = w.document.getElementById("yt-hitchhiker-feedback");
if (x) x.style.display = "none";
if (t) {
// resume the video if we know where we paused
function once(e,evt,f){
var _f=function(){
f.apply(this,arguments);
e.removeEventListener(evt,_f);
};
e.addEventListener(evt,_f);
}
var seekDone=false;
function seekVideo(){
if (seekDone) return;
console.log("video resuming from "+min+":"+sec+"...");
this.currentTime=t;
seekDone=true;
}
once(popv, "load", seekVideo);
once(popv, "play", seekVideo);
once(popv, "canplay", seekVideo);
once(popv, "playing", seekVideo);
once(popv, "progress", seekVideo);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment