Slick Pop-up Video Player using GreyBox & Flowplayer
Published October 14, 2010 | Categories: Web Development
Both GreyBox and Flowplayer are free third-party resources for pop-ups windows and online video, respectively. Combining the two makes a great video player that is easy to maintain and design. Download the source files:
- GreyBox
- Flowplayer (GPL License)
Both will be packaged in ZIP files. Unpack them and place their contents into their respective directories as shown below:
You will also need to add a folder called ‘videos’ unless you choose to deviate from this tutorial. Your index file will be a page with the links to the video. First, open your index file or whatever page you are working with that will display link to the pop-up videos. These lines of code are required in the <head> tag to get GreyBox to work:
<head> <script>var GB_ROOT_DIR = "/greybox/";</script> <script src="greybox/AJS.js"></script> <script src="greybox/AJS_fx.js"></script> <script src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> </head>
Then, within the body of your document, set up links or image links using this format or similar format found on the GreyBox useage page:
<a rel="gb_page_center[560, 450]" title="NAME OF POPUP TITLE" href="player.html?filename=videos/VIDEO_FILENAME">
You can set your own title up here or your own popup window size. All of your anchor tags will refer to the document specified in the ‘href’ attribute, which we will create next. This prevents us from making a new HTML file for every video you may have on your link page. Create an HTML file in the same directory as your video links page (index.html in this example) and name it ‘player.html’. This page will dynamically (using JavaScript) to serve the video based on the filename provided in the links page anchor tag. These lines are needed to get the Flowplayer working within the GreyBox popup:
<html> <head> <script src="flowplayer/flowplayer-3.2.4.min.js"></script> </head> <body> <script> var page = window.location.href; var position = page.indexOf("filename="); page = page.substr(position+9); document.write("<a href='"); document.write(page); document.write("' id='player'></a>"); </script> <script> flowplayer("player", "flowplayer/flowplayer-3.2.5.swf"); </script> </body> </html>
The dynamic page allows you to just modify your anchor tags ‘href’ attribute in the file that calls the player page. This page can also be written in ASPX or PHP pages to accomodate your site. If this is the case, the JavaScript can be replaced with code to get the filename variable from the URL. Your directory should now have a setup like the following:
The index page will look something like this in a browser:
And once the link is clicked, you should get a pop-up player that looks like this:
Recent Posts
