Introducing Video Player Sample

January 6, 2012

Video player screen shot Have you ever wanted a fun and beautiful way to publish videos on your own site like the new 60 Minutes or apps from the Chrome Web Store? I’m excited to announce the release of The Video Player Sample! The Video Player Sample is an open source video player web app built using the same architecture as the 60 Minutes and apps. It can be customized, extended, or just used out of the box and populated with your own content.

How it works

When a user opens the Video Player Sample web app, they can choose to watch a single video or create a playlist of videos/episodes from a list that they have uploaded and populated to the app. The Video Player Sample is configured and information about the videos is stored in JSON files (config.json and data.json respectively), both of which are located in the data directory.

Key features

  • A beautiful video watching experience, including a full screen view
  • Ability to subscribe to shows, watch episodes, create play lists
  • Support for multiple video formats depending on what the user’s browser supports (including WebM, Ogg, MP4, and even a Flash fallback)
  • A Categories page with an overview of the different shows/categories available in the app
  • Notifications of new episodes (when the app is installed via the Chrome Web Store)
  • Built in support for sharing to Google+, Twitter and Facebook
  • To ensure easy customization, all source files, including the Photoshop PSD’s, are included

How it’s built

The Google Video Application is written for the open web platform using HTML and JavaScript, broadly following the MVC (Model View Controller) pattern and structure.

Browser Support

In addition to working as an app that can be installed through the Chrome Web Store, the Video Player Web App has been tested and works in all of the modern browsers.

Try it out

You can see a demo of the video player in action in the demo app, or by Adding it to Chrome through the Chrome Web Store. To learn more about how the app works, check out the documentation.

You can grab the code from Google Code.


Cross Posted at:

  • #CodeSample
  • #Chrome Web Store
  • #OpenSource
  • #WebApp
  • #Video Player

Happy Blue Beanie Day

November 30, 2011

Happy Blue Beanie Day from the HTML5 Hipster

HTML5 Guy with Blue Beanie

Credits: Seth Ladd for the HTML5 Guy idea. Kevin Cornell (via) Zeldman for the Beanie.

Other Formats: SVG Adobe Illustrator PNG

  • #Web Design
  • #HTML5
  • #HTML5Hipster
  • #HTML5Guy

Building A More App-y Web

November 17, 2011

Everyone wants “apps” these days, on their phone, their tablets, Apple, has the App Store to sell apps for the Mac.  The demand is coming from all over the place, including consumers who have no idea what apps are, to people who are seeing this as a new revenue opportunity (which, it is)!  I even heard from one developer who said that his boss came to him all panicked because he got a call from the company’s chairman of the board, wanting to know what their app strategy was.  So far, most of the focus has been on apps for mobile devices, tablets, but thankfully it’s really starting to take off on the web, and we’re seeing more web apps appearing.

One piece of the puzzle that hasn’t really solidified yet is what defines a web app, and how does it differ from a web site?  Are app like experiences on the web part of a website, or are they web apps?  What about web sites that provide the same functionality as an app, but looks like a web site?

Is it a web site, or a web app?

TripIt is a great example, it’s concept is absolutely an app, it helps me to coordinate my travel plans into a single place where I can easily organize my trips into a single online experience.  Here’s where it gets confusing, compare their web application to their tablet application.  I can do exactly the same sets of things, but one looks like an application, and one looks like a website.  They both let me do the same tasks, but they provide very different experiences to complete those tasks. So what is the TripIt web app, is it a site or an app?

Before I go too far though, I want to profess my love for TripIt, I use it for all my travel and have been a Pro user for over a year now, and will renew next time it’s up for renewal.  I love that it tells me where I can find my luggage, how to get to my next gate, and often, it knows my flight is going to be late before the airline tells me!  I love that I can carry it on my phone and quickly look up my flight confirmation code, or when I’m in a foreign country, pull up my hotel information hand my phone to the taxi driver and point to where I want to go.

How do we define a web app then?

Many people have suggested different ways to define web apps in a single test or definition.  I enjoy reading AppStorm, I think they do a great job of highlighting awesome web apps, but a while ago, they tried to define web apps, and provided one of my favorite non-answers:

A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

That answer is almost as good as saying “because it’s not orange” to the question why is the sky blue.

It can’t be a single criteria

Single criteria definitions don’t work for me either.  Can we say something is an app because of a single property?  For example, creation vs. consumption, or architecture.  Add the diversity of web apps to the mix, and I think we hit a wall when it comes to defining web apps with a single criterion.

A web app checklist

The diversity of apps makes it impossible to have a single go/no-go checklist that we can use to define apps.  A criterion for one app may be completely inappropriate for another app.  Instead, I think we need to judge apps based on reaching a particular bar of ‘app-y-ness’.

  • Does the app have a tight focus around a single point or purpose?
  • Is the app self-contained, keeping me within the app to complete my task?
  • Does the app encourage interaction, engagement and completion of tasks?
  • Does the app look beaultiful and have a rich user experience?
  • Does the app have an action oriented interface that uses similar paradigms to native applications, for example dialogs, buttons instead of links and new pages?
  • Is there at least a functional offline experience?
  • Does the app take advantage of the capabilities of the device, like geolocation or device motion?
  • Are traditional websites elements and links are hidden from view?
  • Is the app architected to uses a primarily client side architecture model?

Now, let’s look at TripIt’s web “app” vs. their tablet app:

Web “app” Tablet app
Tight focus Yes Yes
Self-contained Yes Yes
Encourage interaction, engagement & task completion Yes Yes
Beautiful & rich user experience Maybe Yes
Action oriented with native design paradigms No Yes
Offline No Yes
Native capabilities No No
Traditional website elements hidden? No Yes
Client side architecture No Yes

By this criteria, even though their web site is super functional, I can get the things done that I want and has some of the qualities of an app, it clearly could be more app-y.  Could TripIt build the same experience as a web app?  Absolutely!  Heck, it might even be less work because then they could reuse a lot of their design and UI components across the web and tablet versions.

But who really cares?

I do!  With more and more people demanding apps, I think we’re missing a huge opportunity to provide our users with web applications that are better, faster, and more fun to use than their mobile or native counterparts.  People will pay for mobile and native applications, but we have given them very few web apps that are worth their money.  We need to step up and change that, let’s build a more app-y web.

  • #HTML5
  • #Web App
  • #WebApps

HTML5 Guy + Gelaskin

November 16, 2011

By popular request - a few little additions to the HTML5 Guy!

Now, with in SVG!  I also created a skin for my laptop with this guy and had it printed at GelaSkins:

Happy Friday from the HTML5 Guy

November 4, 2011