Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

What is the purpose?

Avatar of max7
max7 asked on
JavaScript
7 Comments1 Solution594 ViewsLast Modified:
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');
*/