Video.js Blog

Steve Heffernan2010-11-06

Version 1.1.4 Release - CSS Loading Spinner & More

The most notable update in this version is a loading indicator (spinner), for when the video is buffering or seeking. The spinner works pretty well, however its limited by how accurately each browser tells us what its currently doing through triggered events. The spinner works best in Firefox so far. Safari/Chrome are less consistent with what events are triggered and when. For this reason Im using a more careful approach that makes sure the spinner gets hidden, as opposed to making sure the spinner always shows when the player is busy. Theres a few bugs I had to account for too, like when Safari throws a waiting event, but then no other event to let us know its not waiting anymore.

The spinner icon is made with CSS3 effects (border-radius and transform). The spinning animation is created with a little javascript for now. In webkit browsers the animation could have been done with CSS3 animation, but Id rather keep it consistent between browsers. The technique comes from Kilian Valkhof with initial integration into VideoJS by Janez Troha (dz0ny)

Other features and fixes include:

  • Feature: Added loading spinner.
  • Feature: Improved styles loaded checking.
  • Feature: Added volume() function to get and set volume through the player. - Fix: Fix issue where FF would loop video in background when ended.
  • Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
  • Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
  • Fix: Updated to show links if only unplayable sources and no Flash.
  • Fix: Issue where if play button was loaded after play, it wouldnt hide.

Download version 1.1.4