Tag Archives: mediabox

Switching from QuickTime to JW FLV Player

Posted on by
7

Awhile back I enabled mediabox where if you clicked on a resolution from our main catalog, it’ll pop out a video player on top of our page instead of launching the video directly. The problem with that was the object was embedded with QuickTime and you know how much I hate QuickTime.

I was messing around with JW FLV Player and remembered that it was able to play H.264/MP4 files. The idea of trying to use it to play QuickTime/MOV files popped into my head and after testing a bit, it was a success! Took me some time to figure out how to escape an url for FlashVars. Turns out you’ll have to urlencode the following 3 symbols: = ? &

Then I had to remember how to modify mediabox to get it to stop using the QuickTime embedding code and to switch to the SWFObject code I wanted to use. After getting that to work, I realized mediabox has evoled into mediaboxadvanced and was now much cooler. It now has rounded edges and even supports sets of media so you can browse between them w/o having to leave the player. One of these days, I may consider linking up all the trailers or maybe the current top 10. But for now, I’ve linked up all the trailers/clips of the same movie and of the same resolution.

Switching over to the new mediaboxadvanced was pretty straightforward. Took a few tries to figure out which set of MooTools I needed, but once I had my sample page working, it was only updating my scripts to point to the newer versions and a 2 line change to add support to sets and to change mediabox to lightbox. I’ve also enhanced the title to show not only the movie name, but the clip name as well as the resolution.

I’ve tested it out on Firefox and IE8 and they both seem to work fine. Let me know if you hit into any issues.

Too bad the Apple trailer links are still broken unless you change your browser’s User Agent to Quicktime, or this update would’ve been that much cooler.

Shadowbox Enabled

Posted on by
7

So I’ve always wanted to enable streaming/playing hd videos in your browser and have been asked if that was possible many times. However, I also wanted to maintain the downloadable aspect of it.

Awhile back, I was played around with Cooliris (previously known as PicLens), however the only video type it supported was Flash. I sent them an email, but they said they were working on it. I believe they still do not support Quicktime movies yet.

I was also playing with Lightbox, but mainly for my photo gallery. It was cool in the fact I can enlarge an image and darken the screen behind it. So while fixing up some random issues on my site today, I decided to see if Lightbox supported video. Unfortunately they don’t:

Can I display flash, video, or other content using the script?

Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley’s ThickBox.

I searched online and found a few that did: Lightview, Lightwindow, mediabox, and Shadowbox.

Lightview looked really nice with the rounded corners, but unfortunately it wasn’t free. If there’s demand to improve to this feature, I might consider switching to it in the future.

Lightwindow did not work in Firefox 3 for some reason. Worked fine in IE7.

mediabox is actually my favorite. It auto-resizes the window to fight the video player snuggly. However, they didn’t have a download package and the installation steps weren’t easy to follow. I was going to invest some time in understanding what I needed to do, but then I found…

Shadowbox works right out of the box and contains simple examples. Unfortunately it doesn’t have the auto-resize thing and seems to stretch the video player to fit the height/width I specify for the frame.

I initially was hitting into the issue where it wouldn’t detect Yahoo’s trailers as Quicktime movies, since they end in .dll. However, I was able to specify player=qt in the rel attribute, and things are working fine now.

With this, I don’t have to modify the existing href to the actual trailer and people can still right click and save the trailer onto their hard drive. What Shadowbox enables is if you’re just browsing and just want to watch some HD trailers in your browser, this has become simple.

If anyone hits into issues, please do let me know.

Update:
Turns out I was mistaken about mediabox’s auto-resizing. I finally managed to grab all the files I needed. I’ve uploaded it to zSHARE if you’re interested with playing with it: mediabox Version 0.7.3. It does add a black border around the video player, which I like. I also had to modify the code to set the backcolor attribute for the embed object. Since I didn’t know what the exact dimension of these videos are, it was filling in the extra spacing with a blinding white color. Finally, I added .dll as an extension that should use the Quicktime code path.

Not too sure which one I like more. Going to stick with mediabox for now.