Play .mp4 Videos in the Shadowbox FLV Player
Dec 03
Here at TPI, we love Shadowbox. It is a very clean and simple way of displaying a photo gallery or playing a video on a website. To play a .mp4 video on a site, you would normally initiate the Shadowbox player like this:
<script type="text/javascript>
Shadowbox.init({
players: ["img", "qt"]
});
</script>
And then use an anchor to make the image or text clickable like this:
<a rel="shadowbox" href="my_video.mp4" title="My Video Title">
Watch The Video
</a>
This works, but it relies on the fact that the clients browser has the quicktime plugin installed. Some of you already know that the Flash player can play .mp4 video files. The Flash plugin is installed on almost all browsers, so it would be ideal if the .mp4 videos would play in the Shadowbox JW Player instead.
Lucky for us, Shadowbox has an option that lets you decide what extensions work with which players. In this case, we want .mp4 videos to use the “flv” player rather than the “qt” player. Here’s how you do it:
<script type="text/javascript">
var customExt = {
img:["png","jpg","jpeg","gif","bmp"],
swf:["swf"],
flv:["flv", "mp4"],
qt:["dv","mov","moov","movie"],
wmp:["asf","wm","wmv"],
qtwmp:["avi","mpg","mpeg"],
iframe:["asp","aspx","cgi","cfm","htm","html",
"jsp","pl","php","php3","php4","php5",
"phtml","rb","rhtml","shtml","txt","vbs"]
};
Shadowbox.init({
players: ["img", "flv"],
ext: customExt
});
</script>
Normally, the “qt” player plays all “.mp4″ files. Simply move the “mp4″ extension to the “flv” property. Using this method, you can decide which extensions use which players in Shadowbox.
Now, when a user clicks the Shadowbox link, the .mp4 video uses the “flv” player and plays in the JW Player:
<a rel="shadowbox" href="my_video.mp4" title="My Video Title">
Watch the .mp4 video in the JW Player.
</a>