Viget Inspire

ABOUT BRIGHTCOVE

Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.

Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).

However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...

Continue reading "Designing a Custom Flash Player for Brightcove"

Leave a comment

Have you already read Part 1 of this two-part series?  If not, check it out, then read the last 4 tips below.

3. Always deinterlace

If you've bought a TV recently, you may have heard the terms 1080i or 480p. These numbers aren't there to make the cable girl look like she knows what she's doing -- these numbers actually mean something. The numbers (1080, 480, etc.) are the dimensions of the picture you are watching. If you are looking at a 1080i picture, then the screen size or aspect ratio is 1920 pixels wide by 1080 high (1920x1080).

The letter "i" stands for interlaced, which is the format all video on TV is broadcast. Interlacing is simply the interlacing of two frames together. You begin with frame 1. Your TV only fills in the rows for every other row (1, 3, 5, etc.) with frame 1's video. In the even lines (2, 4, 6, etc), the TV uses the lines of video from frame 2. The reason for interlacing goes back to the early days of TV. Before the LED monitors, all video was displayed on CRT (Cathode Ray Tube) monitors. The way these CRT's work is they shoot a beam across the top of the screen. The opposite side reflects it back and the beam zig-zags all the way down the screen until you have your picture. Once its done with one frame, it starts at the top and does it all over again for the next frame. If you are looking at 1080 screen, you would have 1080 lines stacked on top of each other. Well, in the old days, this caused a problem. By the time the beam was at the bottom of the screen, the lines at the very top were starting to fade, so when the beam started again at the top, the line was refreshed with a new bright beam. When this is done at a high rate, the picture would flicker. The reason this works is that it now takes half the time complete one cycle through a frame, which is quick enough so the first line does not fade, thereby removing the annoying flickering. So why is this a problem now?

HD televisions and LED monitors are what are called progressive scan display. The technology of these has advanced to the point where there is a danger of that fading that happens on CRT monitors. Progressive scan displays do not interlace the frames of video but simply display the entire frame concurrently. This becomes a problem when interlaced video is displayed on a progressive display. You can see from the image below that when an interlaced video is viewed in a progressive display that the 2 frames are actually visible. This is especially true with high motion frames like the one below.

That long explanation leads into the most important thing to look out for when encoding video for the web: since the vast majority of video is interlaced, you ALWAYS need to deinterlace your video when encoding or you will get what you see above. All major video encoders have this ability but they won't do it by default.

Continue reading "6 Things To Know About Video For The Web - Part 2"

Leave a comment ( 10 )

Video on the web is showing up in more and more places all the time. It's also easier to capture and with mobile decices, web cams and hand held cams. What we can see from this is that it's something that is here to stay. For those of us responsible for putting it up on the web (and even those who aren't!), there is a lot we need to know about what goes into creating and distributing video.

This post is meant to be a broad look at how far video has come and where it is today.  it provides some helpful tips about distributing video on the web.

Since blog posts that have numbers in their titles get more attention, I broke up video into six sections.

Continue reading "6 Things To Know About Video For The Web - Part 1"

Leave a comment ( 16 )

The weekend before last, I participated in Rails Rumble: a 48-hour contest between small teams of Ruby on Rails developers worldwide. Viget had members in four of the teams, and everyone really delivered (you can read more about the others here). Our team (Patrick Reagan, Nicholas Schlueter, Rob Ares, and myself) built Qflip, an app that randomizes your next Netflix rental with the help of an anonymous community.

Working closely with 3 developers (photographic evidence) on a tight timeline was a unique experience, and it forced me to rethink a lot of my web design processes. While these lessons specifically apply to tight design projects, in some sense, every project is a tight design project: It never seems like you have enough time or resources to get the results you want.

So, here are a few thoughts I had on designing with developers, designing within constraints, and designing for maximum impact with minimum resources:

Continue reading "Under Pressure: Lessons Learned from 48 Hours of Design"

Leave a comment ( 6 )

In my last EE post, I covered some ExpressionEngine tricks we used for managing multiple sites, removing the /comments URL segment, and setting up a simple “Preview” function.

This time, we’re going to use URL segments to create some dynamic user profiles, sort a portfolio page, and make a flexible upcoming event list.

Continue reading "Building Viget.com In EE (Part 2)"

Leave a comment ( 9 )

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.

JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

Continue reading "Pulling Your Flickr Feed with jQuery"

Leave a comment ( 30 )

When we decided on the new strategy for Viget.com, a few technology options were considered for the relaunch. We needed a platform that:

• Could accommodate the types of content (five blogs, five blogrolls, Flickr feeds, team member pages, work pages, careers) we wanted to add to the site
• A designer could build without in-depth programming knowledge
• Allowed us to manage the structure of the four sub-blogs

ExpressionEngine was the clear choice, with powerful customization options and a great community behind the scenes. Still, with EE's depth of possibilities, we had to figure out a few tricks along the way in order to get what we wanted out of it. In this post, I'll talk about creating multiple blogs with common structures through variables, losing the nefarious /comments URL, and setting up a preview option so your bloggers can see how their posts look before publishing them.

Continue reading "Building Viget.com In EE (Part 1)"

Leave a comment ( 11 )