JavaScript Popup Media Player
  [next] |
JavaScript Popup Media Player
Playing videos in popup windows is often a simple task, but when you end up with multiple pages for each individual video, things can quickly become complicated. In this article, we’ll be discussing how to use just one page for your popup.
It’s easy to upload a video file and open it in a new window; it’s also easy to add a description by adding an HTML page, but that’s all static – you have to edit everything, and if you want to add another video, you have to create a new HTML file. Pretty soon, you’ll have a lot of unnecessary HTML documents. We can clean that up with JavaScript, and still make it accessible to the users without JavaScript. How? Have a look at this code:
<a href=”/media/file.mpg” onclick=”popMedia(0); return false;”>Play file.</a>
The direct link is to the actual media file – users without JavaScript can download the video, however, users with JavaScript will not go to where the link specifies due to the return false statement. At this moment, the popMedia() function is undefined. To define it, put the following in the <HEAD> tags of your document.
<script type=”text/javascript”><!—
function popMedia(id){
window.open(“player.html?f=”+id,”_popMedia”,”width=400,height=400”);
}
//--></script>
The next step is to open a new window and add another HTML file. By having just one media player file, we won’t have to have the same JavaScript on every page. This way, you won’t have to modify any of your HTML files to add JavaScript to the header (even if you use the SRC attribute of the SCRIPT tag, you’ll have to modify all your HTML files). You can also directly link to the player.html file instead of having it open in a new window by using the following:
<a href=”/media/file.mpg” onclick=”location.href=’player.html?f=0’; return false;”>Play file.</a>
Users without JavaScript will link directly to the file; but users with JavaScript will be taken to the player.html file. Now I’m sure you’re curious about that zero being in there, when we should be specifying a file’s location. That can easily be explained by the source code of the player.html file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Media Player</title>
<script type="text/javascript"><!--
var files = ["file1.wmv","file2.avi","file3.mov"];
var titles = ["File 1", "File
2", "File 3" ];
var descs = ["This is the first file.",
"This
is the second file.",
"This
is the third file, which is a Quicktime file."
];
var dims = ["400x400","400x400","400x400"];
srchStr = location.search;
obj = document.getElementById("medObj");
srchStr = srchStr.split("f=")[1];
objType = files[srchStr-1].split(".")[1];
objType = (objType=="mpg"||objType=="mpeg")?"video/mpeg":
(objType=="avi"||objType=="wmv")
?"video/x-msvideo":"video/quicktime";
var pluginspace = (objType=="video/x-msvideo")?"https://www.microsoft.com/windows/windowsmedia/default.aspx":(objType=="video/quicktime")?"https://www.apple.com/quicktime/download/":"";
var codebase = (objType=="video/x-msvideo")?"https://www.microsoft.com/windows/windowsmedia/default.aspx":(objType=="vide/quicktime")?"https://www.apple.com/qtactivex/qtplugin.cab":"";
document.title += " | "+titles[srchStr-1];
dimW = Number(dims[srchStr-1].split("x")[0]);
dimH = Number(dims[srchStr-1].split("x")[1]);
window.resizeTo(dimW+300, dimH+100);
window.moveTo (10 , 10);
//--></script>
</head>
<body>
<script type="text/javascript"><!--
if(navigator.appName != "Microsoft Internet Explorer") document.write('<obj'+'ect
id="medObj" pluginspace="'+pluginspace+'" codebase="'+codebase+'"
data="'+files[srchStr-1]+'" standby="Loading Video..." style="float:
left;" type="'+objType+'" width="'+dimW+'" height="'+dimH+'"></object>');
if(navigator.appName == "Microsoft Internet Explorer") document.write('<embed
pluginspace="'+pluginspace+'" src="'+files[srchStr-1]+'"
style="float: left;" type="'+objType+'" width="'+dimW+'"
height="'+dimH+'"></embed>');
--></script>
<div id="descObj" style="float: right; width:
200px;">
<script type="text/javascript"><!--
document.write (descs[srchStr-1]);
//--></script>
</div>
</body>
</html>
As you can see, we’re placing arrays of corresponding data in our script.
This way, the zero that comes after the f refers to the first index of each
array, so that the file address, title, and description all correspond to one
another. We also have a fourth array called “dims.” This array is
what you’ll use to specify the dimensions of your video. You’ll
notice that all three of the example files – file1.wmv, file2.avi and
file3.mov – have different extensions. These are for demonstration purposes.
Based on the video file’s extension, the script will detect the encoding
type to tell the browser what plug-in to use to interpret the file. If the browser
lacks any of the plug-ins, we’ve provided URL’s where the browser
can download them, so you can view the videos.
[next] |
Created: June 5, 2003
Revised: September 23, 2004
URL: https://webreference.com/programming/javascript/jf/column5/1
Find a programming school near you