Usability and streaming improvements in FV Player

FV Player 7.2.5.727 brings the following improvements:

• Playlist previous and next item buttons in the control bar
• Option to move the fullscreen button to control bar
• Refined sharing icons – using SVG
• New color picker with transparency setting
• Volume control improvements
• Improved HLS automated quality switching (ABR)

Some other improvements were made since we did the last blog announcement too:

• Improved HLS engine
• Site speed improvements regarding HLS.js and Dash.js
• Template checker improvements

New controlbar buttons

We got a feature request to add playlist next and previous item buttons when using audio playlist with FV Player. In the end we added it even for the video playlists as we liked the feature. YouTube does it this way too, so users will be familiar with it.

Another feature request was to move the fullscreen button to the control bar. The current placement in the top right corner might be a bit unusual for some of the users as both YouTube and Vimeo feature this button in bottom right corner. In the end we decided to make this an option in the Custom skin and make it a fixed preference for the “YouTuby” skin.

Portrait of a Place: Away With the Land - NOWNESS

Better appearance

The player appearance was greatly improved with release of FV Player 7 but some of the elements were still using the old FV Player 6 styling or assets. That’s why we improved the styling of the video sharing buttons to use SVG vector graphic rather than old school PNGs. This way the buttons are sharper and we can work on further improvements, such as making them gray scale or less prominent for FV Player’s “Slim” look.

With vector graphic the buttons are always sharp

We also enhanced the skin editor to support transparency. For now you can set this property for the player control bar and of course the subtitles background.

Transparent controlbar

Our goal is not to provide all the possible skin settings but provide what’s useful. In future FV Player will help you avoid making mistakes like choosing colors which might decrease contrast of the player controls too much or make the time values unreadable.

Better usability

We also received a bug report that the volume bar doesn’t let you drag outside of its boundaries which makes muting the video too hard. We fixed that and submitted the fix to core Flowplayer team too as the issues is caused the Flowplayer 7 core.

HLS and DASH improvements

Since HLS only plays natively on some of the browsers (iOS, Android, Safari and Edge) FV Player uses the powerful HLS.js library (as well as Flash HLS) to bring the HLS playback to other browsers like Firefox or Chrome. This library has been updated, you can read the full story behind it here:

One of our Pro users reported an issue with playback of HLS streams on Google Chrome. These videos player perfectly fine in browsers which support HLS natively, so it was clear there is some issue with HLS.js.

The issue seemed to be  related to HLS version 4 streams which use EXT-X-BYTERANGE feature. AWS Elastic Transcoder creates such streams by default if you pick HLS version 4 rather than version 3 (which we still recommend).

In the end we found that it plays fine in full-featured HLS.js and the issue is only present in light version of HLS.js which we used. So we filed in a bug report and switched to using the full HLS.js library. It’s a bit bigger, but stability and reliability is more important.

New version of HLS.js also allowed us to also enable the capLevelToPlayerSize setting. With that the automated quality switching (or Adaptive Bitrate Streaming) will never choose video resolution bigger than the player size. It’s great particularly if you use 4K streams as it doesn’t make sense to load these unless user really has a 4K display with video displayed in fullscreen.

The other improvement only applies to FV Player Pro Beta users for now. Until now we used to load the Dash.js library automatically if there was a Vimeo video. Now we changed that to load it only if you actually play the video. It’s a big library – 536 kB (142 kB when using GZip) and it’s not even needed on iOS as it plays HLS for Vimeo, so this will reduce the amount of JavaScript which has to load on your pages. We have prepared such improvement for HLS.js too.

Template checker improvements

A lot of our users use a CDN like Cloudflare to ensure their websites stays fast and their assets are delivered in an optimized way. It’s a lot of technology which is fairly easy to setup so sometimes it leads to mistakes in configuration which our users are not even realizing.

The biggest mistake is removing the query string versions from the JavaScript and CSS files. While some of the sites speed analysis tools like GTmetrix recommend doing this we are strongly against it.

• With the query string version in place the browser can see which file has been changed in a plugin update and will get the new version automatically.
• Without the query string version it will download the plugin JavaScript and CSS file once and then hang on to it for weeks. So if we improve something in FV Player these users won’t see the improvement until they clear their browser cache.

The situation gets even worse with CDN in place as then clearing the browser cache won’t help and you have to purge the CDN cache after each plugin update.

That’s how things really work and it’s not just some FV Player limitation, every plugin (which works with JS and CSS on front-end) works like this and might run into some issue. Our full article on this can be found here: How to use WordPress with CDN

We have improved our “Check template” button to detect this issue now so we hope more users discover this issue and fix it.

What’s coming Next

We are finishing up final testing of the new player storage in database. You can expect that FV Player 7.3 will have it enabled by default.