JavaScript Video Playlist

A web-based JavaScript application to manage a playlist of videos and more


JavaScript Video Playlist

 

A web-based JavaScript application to manage a playlist of videos and more

The Ogilvy offices in Los Angeles had a series of mounted flat screen televisions throughout the offices, in the entryway, hallways and kitchen. The majority of the time, they were set to an arbitrary television channel, but during client visits, we needed to create and edit a tailored video, showcasing relevant work and industry knowledge.

I noticed a pain point where several days were required to plan, edit and render the video, and any changes needed to go back to editing and rendering. It worked fine, but it wasn't terribly efficient.

During this time, a lot of innovation was happening with JavaScript and video. Articles were popping up describing how easily JavaScript could hook into video assets, their timestamps, duration, volume and so forth.

So I decided to build a web-based application that took a simple playlist of videos, and play them one after another. In additon to videos, I also added the ability to insert live streams, live twitter streams, and web pages. For these, I added a duration attribute for how long these would remain on screen before going to the next item in the playlist.


Screenshot of the code that manages the playlist


I also created a guide for how to think about the type of content to include. We wanted the content to have purpose and diversity, to not be overbearing with critical thought or be a stream of empty entertainment.





The entryway



Any live-streamed event could be played in the application.



A custom twitter-feed updated in real-time.

The application adjusted to any size screen or orientation.

The application significantly reduced time and effort to assemble and edit a playlist for our screens and was also a great experiment to push the perception of JavaScript towards powering more significant web-based solutions.


Tested in Chrome, Safari and Firefox


See more