HTML5 video full-screen

Adds fullscreen capability to every <video>

Adds fullscreen capability to every <video>

It works even better than the Flash version because it only maximizes itself in the browser window. Thus you can change it to ANY size. Or by hitting your browser-specific fullscreen key (F11 for Opera) you get real fullscreen.

How does it work?

Start any video and then hit SHIFT-ENTER to maximize to browser window, or hit F11 to fullscreen.

Script authour is Martin Rauscher

Syndicate content

Tested with Opera version(s): 
10.50
Your rating: None Average: 3.8 (13 votes)

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

youtube

thanks <a href="http://www.u94.net/">youtube izle</a>

// ==UserScript== // @name

// ==UserScript==
// @name HTML5 video full-screen
// @namespace http://rauscheronline.de
// @description adds fullscreen capability to every <video>
// just play the video and then hit SHIFT-ENTER or F11
// @include *
// ==/UserScript==

// Version 1.1

(function(){
addEventListener('DOMContentLoaded',init,false);
addEventListener('DOMContentLoaded',function(){
document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false);
},false);
addEventListener('DOMNodeInserted',init,false);
window.addEventListener('resize',resizeHandle,false);
var curVid=null;
var isFullscreen=false;
function init()
{
videos = document.getElementsByTagName("video");

for(var i=0; i<videos.length; i++)
{
var video=videos[i];
if (!video.myFullScreenEnabled)
{
video.addEventListener('play',playHandler,false);
video.addEventListener('stop',stopPauseHandler,false);
video.addEventListener('pause',stopPauseHandler,false);
video.myFullScreenEnabled = true;
//alert(video);
}
}
}

function playHandler(e)
{
//alert("das ist" + this)
if ((""+this) != "[object HTMLVideoElement]") //how to do this right?
return;

curVid = this;
}

function stopPauseHandler(e)
{
if ((""+this) != "[object HTMLVideoElement]") //how to do this right?
return;

if (curVid == this)
{
if (isFullscreen)
restoreScreen(this);
curVid=null; //no we can use F11 without making the video FS again...
}
}

function keyDownHandler(e)
{
//alert("key "+curVid +" e "+e.keyCode+" "+e.shiftKey);
if (curVid==null)
return;

//alt+enter or F11
if ((e.keyCode+""=="13"&&e.shiftKey)||e.keyCode+""=="122")
{
if (isFullscreen)
{
restoreScreen(curVid);
}
else
{
makeFullscreen(curVid);
}
}
}

//saves old style and sets new style to
/*video{
position: fixed;
top: 0;
left: 0;
width: <clientwidth>px;
height: <clientheight>px;
z-index: 1000000;
background-color: rgba(0,0,0,0.9);
}*/
var backup = null;
var oldVid;
function makeFullscreen(video)
{
if (backup!=null)
restoreScreen(video);

//backup old state
oldVid=video;
backup= new Object();
backup.position = video.style.position;
backup.top = video.style.top;
backup.left = video.style.left;
backup.width = video.style.width;
backup.height = video.style.height;
backup.zIndex = video.style.zIndex;
backup.backgroundColor = video.style.backgroundColor;
backup.border = video.style.border;

video.style.position = "fixed";
video.style.top = 0;
video.style.left = 0;
video.style.width = window.innerWidth+"px";
video.style.height = window.innerHeight+"px";
video.style.zIndex = 1000000000;
video.style.backgroundColor = "rgba(0,0,0,0.9)";
video.style.border = "none";

isFullscreen=true;
}

function restoreScreen(video)
{
//restore old state
video.style.position = backup.position;
video.style.top = backup.top;
video.style.left = backup.left;
video.style.width = backup.width;
video.style.height = backup.height;
video.style.zIndex = backup.zIndex;
video.style.backgroundColor = backup.backgroundColor;
video.style.border = backup.border;

isFullscreen=false;
}

function resizeHandle()
{
if (isFullscreen)
{
curVid.style.width = window.innerWidth+"px";
curVid.style.height = window.innerHeight+"px";
}
}

})();

10.63

Doesn't this USJ work on Opera 10.63 ?

It seem that it don't work on my computer :-(

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

By submitting this form, you accept the Mollom privacy policy.