JavaScript Popup Media Player | 2

[previous]

JavaScript Popup Media Player

Let’s have a look at the meat of the script, and analyze it:

      <script type="text/javascript"><!—
            // The files array; when the address has f=0, it means file1.wmv
        var files = ["file1.wmv","file2.avi","file3.mov"];
            /* The titles array corresponds with the files array. When f=0, it means “File 1”; when f=1, it means “File 2” and so on. */
        var titles = ["File 1", "File 2", "File 3" ];
            // “descs,” also, corresponds with the specified file
        var descs = ["This is the first file.",
                "This is the second file.",
                "This is the third file, which is a Quicktime file."
              ];
           // “dims” is the same as files, titles, and descs.
        var dims = ["400x400","400x400","400x400"];
           /* location.search is the “?f=id” part of the current location, we’ll use this to determine the index of our arrays (files, titles, descs, dims). */
        srchStr = location.search;
           // The variable “srchStr” is just going to get what f is equal to in the URL.
        srchStr = srchStr.split("f=")[1];
           // “objType,” here, is going to figure out the file’s extension.
        objType = files[srchStr-1].split(".")[1];
           /* We’re going to do a switch-like statement here. Basically, if the file’s extension is “.mpg” or “.mpeg,” the object’s type will be “video/mpeg”; otherwise, if it’s “avi” or “wmv,” the object’s type will be “video/x-msvideo.” If it’s neither of these, it’s probably a “.mov” file, which would mean our object’s type is “video/quicktime.” If you find another file type and need to add it, you can do so by adding (objType==”new extension”)?”object type”:”default object type” in the place of the quotes at the end (the :“” part). It’s a simplified way to create many if/else statements. Whatever is in parentheses is the if – if(objType==”mpg”||objType==”mpeg”) is the same thing as (objType==”mpg”||objType==”mpeg”)?. The colon is what specifies the “else” statement. So if(ojbType==”mpg”||objType==”mpeg”){ objType = “video/mpeg”; } else { objType = “video/x-msvideo”; } means the same thing as objType = (objType==”mpg”||objType==”mpeg”)?”video/mpeg”:”video/x-msvideo”. Of course, the code we have below is more complex – it’s like an if statement inside of another if/else statement.*/
        objType = (objType=="mpg"||objType=="mpeg")?"video/mpeg":
                (objType=="avi"||objType=="wmv") ?"video/x-msvideo":"video/quicktime";
        /* Pluginspace specifies where the plug-in can be downloaded. If we don’t know what the object type is, we define the variable as an empty string. This avoids an error. Add the location of any other plug-ins, by querying their object type, if necessary. */
   var pluginspace = (objType=="video/x-msvideo")?"https://www.microsoft.com/windows/windowsmedia/default.aspx":(objType=="video/quicktime")?"https://www.apple.com/quicktime/download/":"";
        /* Codebase is the same thing as pluginspace, just for the OBJECT tag instead of the EMBED tag. Again, if we don’t know what the object type is, define the variable as an empty string. Add the location of any other plug-ins, by querying their object type, if necessary. */
   var codebase = (objType=="video/x-msvideo")?"https://www.microsoft.com/windows/windowsmedia/default.aspx":(objType=="vide/quicktime")?"https://www.apple.com/qtactivex/qtplugin.cab":"";
      /* To pretty things up a bit, we’ll add a bar and the title of the video being played to the document’s title. */
     document.title += " | "+titles[srchStr-1];
/* dimW and dimH get the dimensions of the video specified in the “dims” array */
      dimW = Number(dims[srchStr-1].split("x")[0]);
      dimH = Number(dims[srchStr-1].split("x")[1]);
    /* here we resize the window to 300 pixels wider than the video, and one hundred pixels higher than the height of the video */
        window.resizeTo(dimW+300, dimH+100);
    // let’s move the media player ten pixels from the left and top of the screen
       window.moveTo (10 , 10);
   //--></script>

You can customize the script fairly easily, but you need to change the arrays that contain the files, names, descriptions, and dimensions, respectively. You can add as many videos as you want to the array, provided all of the arrays are have the same number of elements (known as equivalence, but not equality).

Note: If the (expression)?statement:statement; code becomes too confusing, use an if/else statement instead. Now we have one last thing to cover:

      <script type="text/javascript"><!—
        /* For non-Internet Explorer users, use the W3C-recommended OBJECT tag. Basically we’re using document.write() to output the OBJECT tag with all of the values necessary: codebase, data (file SRC), type, width, height, and so on. You can modify these values – especially the style attribute – to fit your needs. */

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 you’re an Internet Explorer user, you need to use the EMBED tag. For some reason, Internet Explorer thinks that the OBJECT tag is a security threat and won’t play it. In contrast, a browser such as Mozilla Firefox translates the W3C-recommended OBJECT tag properly. As with the OBJECT tag above, we’re using document.write() to output the EMBED tag and its attributes. Change it as necessary. */
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"><!—
         /* Here we’re just outputting the description of the video currently being played. Again, you can modify the containing DIV tag to suit your needs; wherever you want to output the description, add the following line (in SCRIPT tags, of course). */
      document.write (descs[srchStr-1]);
     //--></script>
    </div>

You can change the output and customize it as much as you want.

You can download some sample files here. This is an example of the Popup Media Player in use.

Note: Since this is a video-player, no media files have been attached as they would be quite large.

Conclusion

When working with JavaScript (as in this process), there are some things consider:

1. It's always a good practice to make your JavaScript extraneous – JavaScript is not reliable in the sense that there are many users who don't know how to use it, and by relying on it you are making the content inaccessible to those individuals. The site should work without any JavaScript.

2. Beware of pop-up blockers, some which will not open pop-ups, even if you click the link. If that becomes a problem, you can link directly to the player.html file and the user can click the back button to return to the previous page instead. Remember, though, to use JavaScript to redirect to the player.html file, and set the HREF attribute’s value to the location of the media file.

3. Consider using external *.JS files instead of placing the JavaScript directly in the headers of each page. This will save file space and simplify the organization of your web site directory.

The idea of opening videos in new windows is common, but this technique should help make things easier and more manageable for you – as a webmaster – and hopefully for your end-users as well.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com

[previous]

Created: June 5, 2003
Revised: September 23, 2004

URL: https://webreference.com/programming/javascript/jf/column5/1