Thoughtprocess Interactive — Web Design & Interactive 314-282-3699

tpi blog

thoughts on web development & digital marketing

Play .mp4 Videos in the Shadowbox FLV Player

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>
          players: ["img", "qt"]

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

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 = {
          flv:["flv", "mp4"],
          players: ["img", "flv"],
          ext: customExt

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

get in touch

comments? questions? we'd love to hear from you.

Whether you'd like to discuss a project, get a little insight, or make a suggestion —
drop us a note using the form below, or give us a call at 314-282-3699314-282-3699.

Ready to get your project started? Request a quote and we'll give you a detailed estimate.