Embedding Video With Brightcove

Over at Planetizen, we recently launched a project we're very excited about: Planetizen Courses. It's a major upgrade from our previous educational offerings, which were Moodle-based and mostly text. The new site is completely video-based, with instructors using screen capture software and cameras to capture their actions and their faces for a personal, one-on-one feel.

The result is a LOT of video. Each course is divided into a number of 5-20 minute chapters, so in addition to hours of video we also had a significant number of individual videos to embed and host. After a lot of research, we decided to use Brightcove as our platform because we felt they offered the best combination of affordability, video quality and flexibility.

What we learned is that even an easy-to-use platform like Brightcove needs some experimentation. As I noted in a previous blog about converting video, there are several steps along the way to converting and uploading video and it is important to be aware of what is happening at each step. In this case, I exported the video as a high-quality, 720 X 405 px, H.264 .mov, then uploaded it for Brightcove's conversion process. One advantage of Brightcove over some other sites is that it recognizes 16:9 vs. 4:3 and presents the video as such instead of letterboxing it. Another plus is that the player will automatically deliver HTML5 to those devices that can't read Flash.

When we embedded the video and set it to playback at the dimensions we'd set for the site, we immediately noticed the video played back blurry. After much experimentation, we realized that Brightcove prepares the video for several "default" sizes, and if your playback window is not one of those sizes, it can takes several seconds for the video to "focus" and adjust. After we changed our design to use one of the default settings, the problem went away.

Another issue that cropped up was a user interface problem. You can personalize your playback window in several ways, the most obvious and useful of which is eliminating the branding and unattractive framing device that comes with the default player. But when we made our own clean player (seen above), it wasn't possible to do the playback button that hovers over the center. The one you see is just a graphic on the thumbnail image, but you'll see if you go to click it it doesn't work. The real controls appear, and you have to mouse down to use those. We were told our level of membership didn't cover that kind of personalization. We left the play button graphic because it could be misread as just an image otherwise, but it is non-functional. Not a dealbreaker to be sure, but it isn't as intuitive as we'd like.

In the end, the results speak well for Brightcove as an embed video player and hosting solution for your Drupal website. Just be prepared to do some tinkering to get the result you desire.