Introducing our new, faster and modular player

22nd March 2017

Our video player has been redesigned. It now has a modular design, extra features and an improved interface.

Features

The most useful feature added is the ability to use native HTML5 controls on touch devices (primarily smartphones and tablets). While our provided custom controls work at a range of sizes, they can be slightly hard to use on small screens - particularly the slider on the progress bar - due to their small size. As such, the viewer often has a better experience if they are able to use the controls the manufacturer provides and which all modern browsers now support: native HTML5 video controls. These have been specially built by the likes of Apple and Google to work well on mobile devices and so, on devices where space is limited and usability key, we felt it made sense to opt to use those controls. There are a couple of disadvantages of using the native controls to be aware of though: it does make the interface slightly inconsistent (the player looks different on Android and iOS, naturally) and for playlists there is no ‘playlist’ button within those native controls. That is because playlists are virtual containers - they merely consist of a sequence of videos. As one ends, the next one begins. However for the majority of content embedded, the native controls do provide a better experience.

Another bonus is that the native players automatically detect features they support, such as for AirPlay.

Image from Android (smartphone):

Native HTML5 video controls on Android

Image from iOS (tablet):

Native HTML5 video controls on iOS

The new video player expands support for our buffering goal option. As we described in our earlier HTML5 DASH and buffering options post, we added the option to decide how many seconds of video the player should attempt to buffer. That gives you greater control over bandwidth usage. Previously that option was limited to DASH, Now it is available for HLS too, so both major formats are now supported. Note that on iOS, Apple have control of the buffering and so any goal you specify is ignored: it is up to the iPhone or iPad how much data it chooses to buffer. However if our player is able to ask (such as on a desktop browser), it does.

We improved the keyboard controls for accessibility. More commands are supported. This also fixed a small bug where those controls could conflict with custom overlays such as gates.

360 videos can now be packaged in either HLS or DASH (the two primary formats for adaptive streaming for online video - their quality automatically adjusts depending on the available connection speed).

We removed the sharing button as it was used so rarely. There were other considerations too: it is one less button to show, which is always good with limited space. We found that people would simply share the page directly, rather than the particular video. Finally it would cause complications since the page that would be shared may not be what you, as the content owner, would want. If we shared the internal preview URL, it would not include your own site’s URL - one of the key reasons for using a private online video platform is to keep visitors on your site. However when there was the option of using your own page URL, that page may not have the required metadata that Facebook and Twitter looks for when parsing content and so the content would not always display as expected. It fragments analytics too: if you have sharing buttons or your site (perhaps using an external service like ShareThis) then some viewers may click on our button and some on yours. Finally, sharing was usually not an option content owners wanted, as another reason for using a private video hosting service is to reduce content shared.

Performance

The new player loads much faster. The underlying code has been changed. We have replaced how 360 is handled. It is far smaller in size. We have reduced its dependencies.

Previously we included the jQuery library to handle some of the internal positioning and event handling. That library is used by almost all major websites however it simply provides an abstration to underlying code which modern browsers now all support. So we stripped it out and used those underlying calls instead. Even served minified and compressed, the jQuery library was 29.5KB and it took almost a third of a second to download when not cached. It’s now gone completely.

More code has been moved out to external files. These have been given longer cache-expiry times, meaning they only need to be downloaded once and then on subsequent requests for embedded content, the viewer’s browser will serve those files from its local cache.

Previously we prioritised making fewer HTTP requests. However this resulted in being too over-cautious in bundling code just in case it may be needed. Now we take into account what features an embedded video actually uses: does it use the API? If not, that code is not included. Does it use custom overlays (such as clickable regions/hotspots, video gating or call-to-actions)? If not, that code is not included. Was it filmed in 360? Again, if not, that code is not included. There is still some work to be done here, however for the vast majority of videos (which don’t use one or more of the more modular features), far less code gets bundled and so the embed code displays the player faster.

Design

We focused on making the controls simpler and clearer. They are now slightly larger and use a new font family. Previously we aimed for a set of fonts common to nearly all systems like Arial and Helvetica. Now we prioritise prettier, modern fonts like Avenir (favoured by Apple) and Segoe UI (favoured by Microsoft). They will be used when available on the viewer’s device, falling back to Arial and Helvetica if not.

The volume control now does not show or hide on-hover, since this was inconsistent. Now the volume slider is shown if it can be adjusted (such as on desktops) but on mobile devices it is not. On those devices, the external volume controls are used.

The time-watched tool-tip and the settings menu (if that’s set to be used - it provides options for changing the speed and quality) now animate when they show, subtly changing their position and size.

If a video is set to auto-play, we now skip loading the poster frame completely. It’s never shown so it is a file that does not need to be downloaded.

If this all sounds good and you don’t already have an account, why not try our enterprise video platform for free: request a trial today.

Images from ‘Big Buck Bunny’.