User Interface Case Study of Flash Video Players

Flash technology has overtaken the web by storm. Many designers and app developers have been utilizing Flash since it was created by Macromedia in 1996. Today modern standards have been taking over in regards to audio and video streaming, however none can compare to the quality and customizations allowed with Flash apps.

YouTube has spurred more than thousands of viral Internet memes since its introduction. As website development has become mainstream there are numerous open source scripts for creating your own video-based social network. Flash video players are an ever-growing commodity each featuring their own unique interfaces.

Below I’ve gone into a few of the major trends surrounding modern video players. The popularity of HTML5 video libraries may very well give Flash a run for its money. However by today’s standards most Internet users are running the latest in-browser Flash technology for a grander web experience.

Buffer Streams

An important aspect to any video player is assuredly the progress bar. This can be used to track forwards and back in a video to any point. When streaming content via the Internet you may notice some players will display a loading bar along with the track scrubber.

This is a beautiful UI technique which keeps the user informed and in control. It can be difficult gauging not only the length but quality of a video at first glance. By offering a buffer zone your visitors may react more naturally and in-tune with the video content. Social network Vimeo boasts a fantastic example of a simplistic buffer area.

This is a considerate tweak for those who are watching longer series online. For TV shows or movies streaming it may take quite a while for the buffer process to complete. With numerous open tabs running it may be confusing if you cannot figure out how far each video has loaded! ActionScript has some details on creating buffer streams in custom Flash players which you can build in Adobe Flash CS3/CS5.

Related Videos

The best way to rack up members is to keep them glued onto your website. This can be done easiest through related videos according to their interests. YouTube offers these both in the sidebar playlist and after each video finishes.

You may find on similar websites where related links will be paired based on tags. Metacafe is a beautiful example which demonstrates how a social network of video content can be managed. Granted YouTube’s layout provides much more room to breathe, there are hundreds of millions of videos to sort through.

Creating the Home Theater Atmosphere

Computers with larger monitors may act well as a home theater system. Regardless of location in the study, office, or living room it’s possible to create some fantastic interface changes to your own video player. The readiness to shift from regular and fullscreen gives your audience a sense of control on your website.

Many popular video players will also include changes to aspect ratio. If hi-def video content is uploaded onto YouTube this may be supported, however the network is so large they cannot grant this to every channel. Hulu does an outstanding job at creating the home movie experience. Their video player cuts between the middle of each page and boasts large UI controls.

In some cases Hulu even offers a setting change for streaming quality. 480p and 720p are offered on videos which were filmed in HD settings. On interface controls such as Yahoo! Video you’ll notice each button has a unique animation and color change on mouse-over. This technique works well to grab the eye of your viewers and help them navigate smoother.

Open Source Options

I was mentioning earlier how the popularity of Flash has caused an outbreak of designers. In fact searching through GitHub there are quite a few libraries for custom video players. These are mostly written in Flash and JavaScript which pertain to embedding external video content.

But the options within GitHub are merely an appetizer from the main course. Development communities have been dedicated to offering complete solutions for hosted video content. Boonex’s Dolphin is the epitome of open source social networking scripts. It’s free to download with tons of modules for adaptations, one of which includes video uploads.

For those looking into 3rd party flash players JW FLV Player provides all the basics. It’s easy to implement, offers both Flash and HTML5 support, unique skins, and supports in-video advertising! Truly this project deserves the title “#1 open source video player”. Another alternative Flow Player offers similar features, although the community size is much smaller in comparison.

Similarly if you’re looking for alternatives to YouTube it’s often hard to find a complete list. Blogs have written on popular social video websites in the past, but again not so commonly of recent. A great article by Reel SEO includes a list of hundreds of similar video websites sorted by Google PR, Alexa rank, and a few other factors. To further your studies of video player interfaces I recommend checking out any websites that interest you and build off your own perspective.

I’ve included a brief list of examples below:
v.qq.com
Daily Motion
Libero
Video Web.de
CollegeHumor
Truveo
Flurl
UStream
Revver

Conclusion

This has been a detailed study into the world of Flash video content. Information can be shared and created faster than ever before in the history of this planet. Modern Internet is an amazing tool which takes collaboration from anybody able and willing to contribute.

If you’re looking into building your own video player I hope these tips may keep your focus. User Interface is everything and when it comes to online video this phrase holds even more true. It will take dedication and perseverance to compete in today’s wild social landscape. Adobe is constantly offering new tools for Flash developers and it looks like video media has a long, enriching future ahead.

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments