What is the purpose?

max7
max7 used Ask the Experts™
on
Hello Experts,

Attached is a javascript file and I would like someone to, generally, tell me all it's doing and why someone would incorporate this into a website.

I am just learning javascript but from what I can tell, this script:

*determines video formats and their preference
*determines video dimensions within the webpage
*will alert if it can't find a video AND/OR if it has the ability to play a particular video format (not sure on this one)
*determines if certain video formats are not supported by client browser
*loads necessary assets or plugins to play a particular video format

For me, and this may just be my ignorance, if  I don't see why I would go through the all the trouble with determining and prioritizing video formats since I would be the one embedding the video (or serving it) and would know it's format before hand e.g. flash OR quicktime, etc.

What am I missing and why would this script be essential or desirable?
// Movie loading code

//globals
var siteBase = "http://mysite.com/";
var formatPriorityOrder = [ 'mov', 'mp4','ogg','flv' ];

var quicktimeFormats = [ 'mov', 'mp4'];
var html5Formats = [ 'ogg' ];
var flashFormats = [ 'flv' ];

//load QuickTime files
document.write('<script src="../../scripts/qt/ac_quicktime.js" type="text/javascript"></script>');
document.write('<script src="../../scripts/qt/qtp_library.js" type="text/javascript"></script>');
document.write('<link href="../../css/qt/qtp_library.css" rel="StyleSheet" type="text/css" />');



function LoadVideo(){
	var vidFormats = "";
	
	var args = Array.prototype.slice.call(arguments);
	var element = args.shift();
	var vidSrc = args.shift();
	
	element = $(element);
	
	var vidWidth = "";
	var vidHeight = "";
	if (args.length == 2){
		vidWidth = args[0];
		vidHeight = args[1];
		element.style.width = vidWidth + "px"; //make passed element the same size as movie
		element.style.height = vidHeight + "px";
	}
	else{
		vidWidth = "100%";//element.style.width.sub("px","");
		vidHeight = "100%";//element.style.width.sub("px","");
		element.style.height = "100%";
		element.style.width = "100%";
	}
	
	
	if (vidSrc.endsWith(".mov")){ vidFormats = "mov";}
	else if (vidSrc.endsWith(".flv")){ vidFormats = "flv";}
	else if (vidSrc.endsWith(".mp4")){ vidFormats = "mp4";}
	else if (vidSrc.endsWith(".ogg")){ vidFormats = "ogg";}
	else 
	{
		//var gettingFormats = true;
		var formatGetter = new Ajax.Request('util/movie.php?vidBaseName=' + vidSrc,
			{
				asynchronous: false,
  				onSuccess: function(response) 
				{
    				if (response.responseText != "NotFound"){
						vidFormats = response.responseText;
						//gettingFormats = false;
					}
					else{
						alert("Unable to locate an asset for video " + vidSrc);
						return;
					}
				
  				}
			}
		);
	}
	
	//if (vidFormats == "")
	////	{
	//		while (gettingFormats){
	//			//do nothing
	//			}
	//	}
	
	handlerAndFormat = determineVidHandler(vidFormats);
	
	if (handlerAndFormat == "unsupportedFormat"){
		alert(vidSrc + " not available in a format supported by your browser.");
		return;
	}
	else
	{
		var useFormat = handlerAndFormat.formatToUse;
		var vidHandler = handlerAndFormat.handler;
		
		if (! vidSrc.endsWith("." + useFormat)){
			vidSrc = siteBase + vidSrc + "." + useFormat;
		}
		
		switch (vidHandler)
		{
			case "QuickTime":
				loadQuickTime(element,vidSrc,vidWidth,vidHeight);
				break;
			case "HTML5":
				loadHTML5(element, vidSrc,vidWidth,vidHeight);
				break;
			case "Flash":
				loadFlash(element, vidSrc,vidWidth,vidHeight);
				break;
			default:
				return;
		}
	}
}


function determineVidHandler(availFormats){
	var useFormat = "";
	if (availFormats.indexOf(',') > -1){ //more than one format available
		availFormats = availFormats.split(",");

		formatPriorityOrder.each(function(format){ //select a format based on its priority and availablity
			if ( availFormats.lastIndexOf(format) != -1) {
				if (useFormat == ""){
					useFormat = format;
				}
			}
		});
	}
	else
	{
		useFormat = availFormats;
	}
	
	var vidHandler = "";
	
	if ( quicktimeFormats.lastIndexOf(useFormat) != -1){ vidHandler = "QuickTime";}
	if ( html5Formats.lastIndexOf(useFormat) != -1){ vidHandler = "HTML5";}
	if ( flashFormats.lastIndexOf(useFormat) != -1){ vidHandler = "Flash";}
	
	if (vidHandler != ""){
		return { formatToUse : useFormat, handler : vidHandler};
	}
	else
	{
		return "unsupportedFormat";
	}
}

function loadQuickTime(dstElement, vidSrc, vidWidth, vidHeight){
	var vidName = vidSrc.substring(vidSrc.lastIndexOf("/"));
	vidName = vidName.slice(1,vidName.length-4);
	QT_ReplaceElementContents_XHTML(dstElement,
		vidSrc,
		vidWidth, vidHeight, '',
		//'controller', 'false',
		'autoplay', 'true',
		'bgcolor', 'black',
		'scale', 'aspect',
		'EnableJavaScript', 'True',
		'postdomevents', 'True',
		'emb#NAME' , vidName,
		'obj#id' , vidName);
	
	var qtObj = eval("document."+vidName);
	qtObj.SetKioskMode(true);
}

function loadHTML5(dstElement, vidSrc, vidWidth, vidHeight){
	alert("will load HTML5");
}

function loadFlash(dstElement, vidSrc, vidWidth, vidHeight){
	alert("will load Flash");
}


	
/*
QT_ReplaceElementContents_XHTML($('Demo'),
		'http://dev.mysite.com/mov/Demo',
		'558', '329', '',
		'controller', 'true',
		'autoplay', 'true',
		'bgcolor', 'black',
		'scale', 'aspect');
*/

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
That script is only part of something that helps put videos on the screen.  There's more code to go with that including the links to more javascript.  Even if you could use it, you would have to recreate the directories that are set up and get the other files.

Author

Commented:
Thanks Dave but I'm not so much interested in using it (although it is being used) as I am in trying to understand the logic behind why someone would want or need to use it.  Can you speak to that?

Also, were any of my assumptions about what the scripts does correct at all?
Fixer of Problems
Most Valuable Expert 2014
Commented:
It looks like one of the four formats is passed as a variable to the ajax part of the script which passes it to a server side program, util/movie.php?vidBaseName=' + vidSrc.  I'd guess that that program searches a directory to find and return a list of files with that format / file extension.  The 'load' functions at the end of the code appear to call other javascript routines that probably load the parameters in the page formatted so the viewer can probably click on something to watch the video.

It does not check the browsers ability to play them.  I'm not sure about the dimensions, I don't know if javascript can be used to read that info.  I think it exists because someone with a lot of videos wanted it.  Viewing or reviewing videos.  Maybe a way to present them in a class or library.  There are too many pieces missing to say a lot more about it.

Author

Commented:
>>>It does not check the browsers ability to play them.

but doesn't this code do exactly that?:

handlerAndFormat = determineVidHandler(vidFormats);
      
      if (handlerAndFormat == "unsupportedFormat"){
            alert(vidSrc + " not available in a format supported by your browser.");
            return;
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
"but doesn't this code do exactly that?:

handlerAndFormat = determineVidHandler(vidFormats);
     
      if (handlerAndFormat == "unsupportedFormat"){
           alert(vidSrc + " not available in a format supported by your browser.");
           return; "

No, it actually selects from a list that is passed or generated earlier.  Like I said, javascript does not have the ability to check your computer to see what video formats you are able to play.  Last I heard, the HTML5 video format that is supposed to be "built-in" to browsers was still undecided.  The other formats depend on programs that are not part of a browser to begin with.  Flash (flv) requires the Adobe Flash player, Quicktime (mov) requires the Quicktime player.  They didn't bother listing Windows Media Player (wmv) for some reason.

Author

Commented:
>>>No, it actually selects from a list that is passed or generated earlier

Is this the list you had in mind:

var formatPriorityOrder = [ 'mov', 'mp4','ogg','flv' ];

Or something else?

>>> Like I said, javascript does not have the ability to check your  computer to see what video formats you are able to play.

Actually I was thinking that javascript would check your client/browser not in any way scan your computer.  Here are two articles that shows Javascript can detect what video plugins your browser has:

http://www.knallgrau.at/code/plugin_js

http://oreilly.com/pub/a/javascript/2001/07/20/plugin_detection.html
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Those are old articles.  I would check them before I tried to use them.  No, that wasn't the list I was referring to.  The main routines have parameters that they refer to that aren't listed there, they come from the script that calls them.  In any case, you can't tell all of what is going with that code because not everything is shown.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial