Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,846
    Thanks
    21
    Thanked 157 Times in 148 Posts

    Smile Bookmarklet to Dim / Raise the "lights" for any online video

    If you're like me, then you like to watch video online. Most of the time, when I watch video, I maximize the video to fit the dimensions of my monitor's screen. This usually provides the best viewing experience.

    However, sometimes, I am watching a low-quality video, and maximizing the video size only makes the picture more grainy/fuzzy and subsequently harder to watch. It is during these times that I often get distracted by and annoyed with the "noise" (the other html elements on the page surrounding the video), and I long for a way to make that noise less conspicuous -- so I can fully focus on the video that I'm watching.

    In these instances, some sites provide a feature to dim or lower the "lights" -- and essentially fade out the noise surrounding a video. But, often times, in my experience, this feature is non-existent on the site's that I peruse. So, when the feature is lacking on a particular site, what's a person to do?

    Well, I decided to get my hands dirty and write a javascript bookmarklet (for my own use) that would serve this purpose for virtually "any" video that I might come across on the web. And, after completing my little project, I decided that others might benefit from this bookmarklet as well.

    So without further ado, you can grab the bookmarklet at the following URL: http://rajwebconsulting.com/dimlight...dimlights2.php. At that URL, you will notice that there are 2 links: One for Internet Explorer and another for all other browsers. Simply click and drag the appropriate link (depending on which browser you are using) to your browser's bookmark bar/menu, and the bookmarklet is ready to use!

    (Note: At that URL, I have also placed some demo videos so that you can practice using the bookmarklet.)

    Instructions for use:

    1) Navigate to a page with a video on it
    2) Click the bookmarklet in your bookmarks bar/menu
    3) The bookmarklet loads a very simple utility into your browser -- a menu at the top of your browser window
    4) With your mouse, hover over a given video on the page, and if a blue outline appears around it, then that video is compatible with the utility
    5) Click on any video marked with a blue outline (on mouseover)
    6) Use the links in the utility's menu to dim and raise the "lights" in relation to the selected video

    So that's pretty much it. The utility has a help feature and exit button as well, but those things are self-explanatory.

    A few things to note:

    1) Like the help feature states, this utility will not work for videos that are embedded from other sites. The videos must be local to the current domain. If they are not, then you must navigate to the site that actually hosts the videos and watch (and use the bookmarklet) there.
    2) I've tested the bookmarklet at the following sites (off the top of my head): youtube.com, putlocker.com, novamov.com, and gorillavid.com
    3) If there is a video hosting site that the bookmarlet doesn't work on, please let me know, and I will try to fix the script
    4) I've tested the bookmarklet in the latest versions of Firefox, Opera, and IE. It appears to work well enough in all 3.
    5) For sites that use frames, I have implemented a very raw check for a non-frames version of the site -- so when the bookmarklet is pressed on a frames site, it will try to reload a non-frames version of the site. After the non-frames version of the site loads (if it loads), then clicking the bookmarklet again (after the reload) should work as expected.
    6) The bookmarklet does not work for frames-driven sites. So if the failsafe mechanism in #5 of this list fails to catch the issue (when you are visiting a frames-oriented site), then don't expect the bookmarklet to work.

    Please let me know if you experience any problems with either the script in general or compatibility with a particular site or browser. I am also open to suggestions for improving the bookmarklet, so any ideas/suggestions/recommendations are welcome and appreciated.

    Finally, for you code enthusiasts, here is the code for the bookmarklet and associated, external JS file:

    Bookmarklet code (essentially a "stub" that loads an external JS file):

    Code:
    <a href="javascript:(function(){
    	var my_script = document.createElement('script');
    	my_script.type = 'text/javascript';
    	my_script.src = 'http://rajwebconsulting.com/dimlights_bookmarklet/dimlights.js';
    	my_script.onload = function(){var dimLightsControl = new DimLightsControl();};
    	document.getElementsByTagName('head')[0].appendChild(my_script);
    })();">DimLights!</a>&nbsp;&nbsp;
    
    <a href="javascript: var my_script = document.createElement('script'); my_script.type = 'text/javascript'; my_script.src = 'http://rajwebconsulting.com/dimlights_bookmarklet/dimlights.js'; my_script.onload = function(){var dimLightsControl = new DimLightsControl();}; document.getElementsByTagName('head')[0].appendChild(my_script);">DimLights! for IE</a>
    External JS file:

    Code:
    // DimLightsControl "Class"
    function DimLightsControl()
    {
    	// Fields
    	var docBody;
    
    	// Methods
    	var createLightBoxes = function(boxProps)
    	{
    		for (var i=0; i<4; i++)
    		{
    			var newDiv = document.createElement('div');
    			newDiv.id = boxProps[i][0];
    			newDiv.style.backgroundColor = 'rgb(0,0,0)';
    			newDiv.style.opacity = '0';
    			newDiv.style.filter = 'alpha(opacity=0)';
    			newDiv.style.position = 'absolute';
    			newDiv.style.zIndex = '10000';
    			newDiv.style.left = boxProps[i][1];
    			newDiv.style.top = boxProps[i][2];
    			newDiv.style.width = boxProps[i][3];
    			newDiv.style.height = boxProps[i][4];
    			docBody.appendChild(newDiv);
    		}
    	};
    
    	var dimLights = function()
    	{
    		if (document.getElementById('topDiv'))
    		{
    			if (parseFloat(document.getElementById('topDiv').style.opacity) < .9)
    			{
    				var newOpacity = parseFloat(document.getElementById('topDiv').style.opacity) + .1;
    				var newOpacityIE = newOpacity * 100;
    				document.getElementById('topDiv').style.opacity = document.getElementById('leftDiv').style.opacity = document.getElementById('rightDiv').style.opacity = document.getElementById('bottomDiv').style.opacity = newOpacity;
    				document.getElementById('topDiv').style.filter = document.getElementById('leftDiv').style.filter = document.getElementById('rightDiv').style.filter = document.getElementById('bottomDiv').style.filter = 'alpha(opacity=' + newOpacityIE + ')';
    				setTimeout(function(){dimLights();}, 50);
    			}
    		}
    	};
    
    	var raiseLights = function()
    	{
    		if (document.getElementById('topDiv'))
    		{
    			if (parseFloat(document.getElementById('topDiv').style.opacity) > 0)
    			{
    				var newOpacity = parseFloat(document.getElementById('topDiv').style.opacity) - .1;
    				var newOpacityIE = newOpacity * 100;
    				document.getElementById('topDiv').style.opacity = document.getElementById('leftDiv').style.opacity = document.getElementById('rightDiv').style.opacity = document.getElementById('bottomDiv').style.opacity = newOpacity;
    				document.getElementById('topDiv').style.filter = document.getElementById('leftDiv').style.filter = document.getElementById('rightDiv').style.filter = document.getElementById('bottomDiv').style.filter = 'alpha(opacity=' + newOpacityIE + ')';
    				setTimeout(function(){raiseLights();}, 50);
    			}
    		}
    	};
    
    	var toggleHelp = function(event)
    	{
    		var helpBox = document.getElementById('helpDiv');
    		if (!helpBox)
    		{
    			var e = (!event) ? window.event : event;
    			var coords = findMousePosition(e);
    			var helpDivText = document.createTextNode('If a video has a blue outline when you hover over it, then you may click on the video to select it. Then dim or raise the lights using the provided controls. NOTE: Videos that are embedded from other sites (i.e., a YouTube video embedded on a Yahoo! Sports page) will NOT work with this utility. Instead, you must view such videos directly on the video provider\'s site (i.e., on YouTube).');
    			var helpDiv = document.createElement('div');
    			helpDiv.id ='helpDiv';
    			helpDiv.style.position = 'absolute';
    			helpDiv.style.zIndex = '20000';
    			helpDiv.style.top = coords[1] + 15 + 'px';
    			helpDiv.style.left = coords[0] + 15 + 'px';
    			helpDiv.style.width = '250px';
    			helpDiv.style.padding = '5px 10px';
    			helpDiv.style.border = '1px solid #000';
    			helpDiv.style.borderTop = '10px solid #000';
    			helpDiv.style.font = '11px/14px Verdana,Arial';
    			helpDiv.style.color = '#000';
    			helpDiv.style.backgroundColor = '#f9f9f9';
    			helpDiv.style.textAlign = 'left';
    			helpDiv.appendChild(helpDivText);
    			docBody.appendChild(helpDiv);
    		}
    		else
    		{
    			helpBox.parentNode.removeChild(helpBox);
    		}
    	};
    
    	var exitControl = function()
    	{
    		docBody.removeChild(document.getElementById('linksDiv'));
    		if (document.getElementById('topDiv'))
    		{
    			docBody.removeChild(document.getElementById('topDiv'));
    			docBody.removeChild(document.getElementById('leftDiv'));
    			docBody.removeChild(document.getElementById('rightDiv'));
    			docBody.removeChild(document.getElementById('bottomDiv'));
    		}
    		removeDivOverlays();
    	};
    
    	var findVideoPosition = function(obj)
    	{
    		var curleft, curtop;
    		curleft = curtop = 0;
    		if (obj.offsetParent)
    		{
    			do
    			{
    				curleft += obj.offsetLeft;
    				curtop += obj.offsetTop;
    			}
    			while (obj = obj.offsetParent);
    		}
    		return [curleft, curtop];
    	};
    
    	var findMousePosition = function(e)
    	{
    		var posx, posy;
    		posx = posy = 0;
    		if (e.pageX || e.pageY)
    		{
    			posx = e.pageX;
    			posy = e.pageY;
    		}
    		else if (e.clientX || e.clientY)
    		{
    			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    		}
    		return [posx, posy];
    	};
    
    	var createControlInterface = function()
    	{
    		var linksDiv = document.createElement('div');
    		linksDiv.id = 'linksDiv';
    		linksDiv.style.position = 'fixed';
    		linksDiv.style.left = '0';
    		linksDiv.style.top = '0';
    		linksDiv.style.zIndex = '11000';
    		linksDiv.style.width = '100%';
    		linksDiv.style.height = '24px';
    		linksDiv.style.backgroundColor = '#FFFFE7';
    		linksDiv.style.opacity = '.95';
    		linksDiv.style.filter = 'alpha(opacity=95)';
    		linksDiv.style.textAlign = 'center';
    		linksDiv.style.padding = '3px 0 2px 0';
    		linksDiv.style.font = '14px/20px Verdana,Arial';
    		linksDiv.style.color = '#000';
    
    		var dimLightsLinkText = document.createTextNode("Dim Lights");
    		var raiseLightsLinkText = document.createTextNode("Raise Lights");
    		var helpLinkText = document.createTextNode("Help");
    		var exitLinkText = document.createTextNode("Exit");
    		var spacerText = document.createTextNode("  |  ");
    
    		var dimLightsLink = document.createElement('span');
    		dimLightsLink.id = 'dimLightsLink';
    		dimLightsLink.onclick = dimLights;
    		dimLightsLink.style.cursor = 'pointer';
    
    		var raiseLightsLink = document.createElement('span');
    		raiseLightsLink.id = 'raiseLightsLink';
    		raiseLightsLink.onclick = raiseLights;
    		raiseLightsLink.style.cursor = 'pointer';
    
    		var helpLink = document.createElement('span');
    		helpLink.id = 'helpLink';
    		helpLink.onmouseover = helpLink.onmouseout = toggleHelp;
    		helpLink.style.cursor = 'help';
    
    		var exitLink = document.createElement('span');
    		exitLink.id = 'exitLink';
    		exitLink.onclick = exitControl;
    		exitLink.style.cursor = 'pointer';
    
    		dimLightsLink.appendChild(dimLightsLinkText);
    		raiseLightsLink.appendChild(raiseLightsLinkText);
    		helpLink.appendChild(helpLinkText);
    		exitLink.appendChild(exitLinkText);
    		linksDiv.appendChild(dimLightsLink);
    		linksDiv.appendChild(spacerText);
    		linksDiv.appendChild(raiseLightsLink);
    		linksDiv.appendChild(spacerText.cloneNode(true));
    		linksDiv.appendChild(helpLink);
    		linksDiv.appendChild(spacerText.cloneNode(true));
    		linksDiv.appendChild(exitLink);
    		docBody.appendChild(linksDiv);
    	};
    
    	var getTotalPageHeight = function()
    	{
    		var d = document.documentElement;
    		var b = document.body;
    		var who = (d.offsetHeight) ? d : b;
    		return Math.max(who.scrollHeight, who.offsetHeight);
    	};
    
    	var attachDivOverlayHandlers = function(elem)
    	{
    		elem.onmouseover = function()
    		{
    			elem.style.border = '3px solid blue';
    		};
    
    		elem.onmouseout = function()
    		{
    			elem.style.border = 'none';
    		};
    
    		elem.onclick = function()
    		{
    			elem.style.border = 'none';
    			boxProps = {
    				0 : ['topDiv', elem.style.left, '0', elem.offsetWidth + 'px', elem.style.top],
    				1 : ['leftDiv', '0', '0', elem.style.left, getTotalPageHeight() + 'px'],
    				2 : ['rightDiv', parseInt(elem.style.left) + elem.offsetWidth + 'px', '0', '100%', getTotalPageHeight() + 'px'],
    				3 : ['bottomDiv', elem.style.left, parseInt(elem.style.top) + elem.offsetHeight + 'px', elem.offsetWidth + 'px', getTotalPageHeight() - elem.offsetHeight - parseInt(elem.style.top) + 'px']
    			};
    			createLightBoxes(boxProps);
    			removeDivOverlays();
    		};
    	};
    
    	var createDivOverlay = function(currentVid)
    	{
    		setTimeout(function(){
    			var coords = findVideoPosition(currentVid);
    			var divOverlay = document.createElement('div');
    			divOverlay.className = 'overlay';
    			divOverlay.style.position = 'absolute';
    			divOverlay.style.zIndex = '12000000';
    			divOverlay.style.left = coords[0] + 'px';
    			divOverlay.style.top = coords[1] + 'px';
    			divOverlay.style.width = currentVid.offsetWidth + 'px';
    			divOverlay.style.height = currentVid.offsetHeight + 'px';
    			// Must use blank image instead of transparent color for IE compat
    			divOverlay.style.backgroundImage = "url('http://rajwebconsulting.com/dimlights_bookmarklet/blank.gif')";
    			docBody.appendChild(divOverlay);
    
    			attachDivOverlayHandlers(divOverlay);
    		}, 1000);
    	};
    
    	var attachDivOverlays = function()
    	{
    		var processedVids = [];
    		var elems = [document.getElementsByTagName('embed'), document.getElementsByTagName('object')];
    		for (var i=0; i<elems.length; i++)
    		{
    			//alert(i + " - " + elems[i].length + " - " + typeof elems[i]);
    			//if (typeof elems[i] == 'undefined') continue;
    			processedVids.length = 0;
    			while (processedVids.length < elems[i].length)
    			{
    				for (var j=0; j<elems[i].length; j++)
    				{
    					var currentVid = elems[i][j];
    					if (processedVids.indexOf(currentVid) != -1) continue;
    					//alert(currentVid.className);
    
    					if (currentVid.nodeName.toLowerCase() == 'object')
    					{
    						var newObject = currentVid.cloneNode(true);
    						var newParam = document.createElement('param');
    						newParam.name = "wmode";
    						newParam.value = "opaque";
    						newObject.appendChild(newParam);
    						var objectParent = currentVid.parentNode;
    						objectParent.removeChild(currentVid);
    						objectParent.appendChild(newObject);
    						currentVid = newObject;
    					}
    					else
    					{
    						var newEmbed = currentVid.cloneNode(true);
    						newEmbed.setAttribute("wmode","opaque");
    						var embedParent = currentVid.parentNode;
    						embedParent.removeChild(currentVid);
    						embedParent.appendChild(newEmbed);
    						currentVid = newEmbed;
    					}
    
    					createDivOverlay(currentVid);
    					processedVids.push(currentVid);
    					break;
    				}
    			}
    		}
    	};
    
    	var removeDivOverlays = function()
    	{
    		var allDivs = document.getElementsByTagName('div');
    		var moreDivsLeft = true;
    		while (moreDivsLeft)
    		{
    			var foundDiv = false;
    			for (var k=0; k<allDivs.length; k++)
    			{
    				if (allDivs[k].className == 'overlay')
    				{
    					allDivs[k].parentNode.removeChild(allDivs[k]);
    					foundDiv = true;
    					break;
    				}
    			}
    			moreDivsLeft = foundDiv;
    		}
    	};
    
    	var compatCheck = function()
    	{
    		if (!document.getElementsByTagName('body')[0] && document.getElementsByTagName('noframes')[0])
    		{
    			alert('Uh oh, this page uses frames! I will attempt to reload the page without frames, and then you will need to click on the bookmarklet again after the page has reloaded.');
    			// Regex that matches any url, for determining noframes url
    			var regex = /(\()((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\))|(\[)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\])|(\{)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\})|(<|&(?:lt|#60|#x3c);)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(>|&(?:gt|#62|#x3e);)|((?:^|[^=\s'"\]])\s*['"]?|[^=\s]\s+)(\b(?:ht|f)tps?:\/\/[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]+(?:(?!&(?:gt|#0*62|#x0*3e);|&(?:amp|apos|quot|#0*3[49]|#x0*2[27]);[.!&',:?;]?(?:[^a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]|$))&[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]*)*[a-z0-9\-_~$()*+=\/#[\]@%])/img;
    			var noframesURL = regex.exec(document.getElementsByTagName('noframes')[0].innerHTML);
    			if (noframesURL != null)
    			{
    				location.replace(noframesURL[0]);
    			}
    			else
    			{
    				alert('Darn, I couldn\'t find an alternate version of the site without frames, so I guess you won\'t be able to use this bookmarklet on this particular site. Sorry it didn\'t work out!');
    			}
    			return false;
    		}
    		else
    		{
    			try
    			{
    				docBody = document.getElementsByTagName('body')[0];
    				return true;
    			}
    			catch(e)
    			{
    				alert('An error occurred! Script aborted.');
    				return false;
    			}
    		}
    	};
    
    	// Pseudo Constructor
    	var constructor = function()
    	{
    		if (compatCheck())
    		{
    			createControlInterface();
    			attachDivOverlays();
    		}
    	};
    	constructor();
    }
    Enjoy!
    Last edited by chump2877; 12-07-2011 at 02:33 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •