Web video player on touchscreen

When developing major version of the Nuevo plugin v10 and each following minor version, we focused heavily on the player's layout and performance on touch devices. One of the most important tasks was to differ touch and mouse support, not only when the player is initially rendered, but also later when the user decides to connect or disconnect the mouse on his touch device. This is possible with the most of the tablets, and on laptops with touch screen support.

The latest version 10.2.0 of the Nuevo plugin features new option to cancel user touch activity immediately when he touches active video element or touch website content outside of the player. On a device with the mouse support the player uses 2000ms timeout before the control bar can disappear. On touch device this is 4000ms before big icons and control bar are hidden. Below you have comparision how other commercial players act for this purpose.

PlayerDesktopTouch device
Nuevo2000ms4000ms
JWPlayer2000ms4000ms
Netflix Player2000ms7000ms
Bitmovin2000ms2000ms
Flow Player~200ms3000ms
Theo Player~200ms3000ms

Both: mouse supported and touch supported user activity timeout can be adjusted using appropriate videojs options.
It's not suggested to use a shorter timeout on a touch device as this makes button menus difficult to navigate. You can always cancel timeout by touching a video area or body outside of the player.

Code Snippet
var player = videojs("player_one",{inactivityTimeout:1500, inactivityTouchTimeout:3000});

Version 10.2.0 of our flag Nuevo product includes a fix for VR/360° when using Nuevo plugin and skin on touch devices. In earlier v10 versions we just forgot about the VR canvas new type of touch support, which was applied to video element only.

The player in version 10.2.0 now can show chapter tooltips not only on the desktop, but also on touch screen, when you touchmove over the progress bar.

Nuevo software v10.2.0 update is highly suggested for those of our clients who care about look and user experience on touch devices.

Nuevodevel Blog
Nuevodevel Tweeter