Video quality switching solves the problem of serving the right videos to all your viewers and customers. With quality switching, every visitor can choose a quality appropriate to their bandwidth restrictions. You no longer need to worry about your video not playing on mobile or looking pixelated on large screens.
And how does quality switching work?
Play the video and hover your mouse over the player to pick quality. The video quality will switch on the go. The selected preferred quality is stored as a cookie and therefore you get your quality across the site (matching video site-wide)
The above player plays mobile (480x272), standard (640x360) and high resolution (940x544) MP4 and WebM videos (for best browser compatibility as 70% of browsers use MP4 and the rest Adobe Flash WebM format).
HLS Exception: Users playing HLS video do not get visual quality switching options as HLS has automated quality selection built-in. For now it is also the only way of quality switching for iPhone and iPad.
How to Implement Quality Switching with FV Player
1. Update to the latest FV Player Pro version. If you are a licensed user, you can install a Pro addon for our plugin containing this feature. If you wish to upgrade your player to use this feature, you can purchase a license.
2. In wordpress admin panel of your webpage go to Settings > FV Player Pro > scroll down to Quality Switching. 
3. Enter file part quality names along with labels into the given fields. File naming scheme can involve frame height or abbreviation for video quality. Since videos might have various ranges of quality it might be better to choose name for range of quality. Enter one item per line. To add more quality options, click Add quality settings. When you are done, click Save All Changes.
-
Naming scheme is part of your file naming scheme like -hd, -sd, -mobile.
The setting in the first row will be the default quality. For example, in the setting below it’s HD.
Choosing the default quality in FV Player's Quality Switching settings
Even if the link in the shortcode is “-sd.mp4” the playback will start with HD. When a user switches quality to for instance SD and that is recorded in the browser, the video will always start with HD and immediately switch to SD.
Switching to a quality that is missing will not break the playback as the player will automatically switch back to the one which is remembered. The video will fail only if the default quality is missing on the server.
-
Label is what will appear on button on player when a user wants to switch quality. For example:
Video player - controls for quality switching:
4. Prepare your video in desired qualities and upload them to one location. Let's say you want to provide HD, SD and a mobile version of your video. When you have a look at the video directory listing, you should see:
your-video-HD.mp4
your-video-SD.mp4
your-video-mobile.mp4
All of them should be on (nearly) the same URL:
http://videos.my-site.com/my-chosen-directory/your-video-HD.mp4
http://videos.my-site.com/my-chosen-directory/your-video-SD.mp4
http://videos.my-site.com/my-chosen-directory/your-video-mobile.mp4
5. Now insert your video using shortcode. You only need to enter the shortcode for a video in a quality you want to serve as a default one.
[fvplayer src="http://video.your-site/video-SD.mp4" qsel="true"]
Then our plugin will see that you enabled quality switching for the video and that the video matches the -SD quality and will add up -HD and -mobile automatically.
The qsel parameters tell the shortcode, that your video available as /videos/your-video-sd.mp4 is also available in -mobile and -hd quality. It literally just replaces "-sd" with "-mobile" and "-hd", so all the videos where you use qsel="true" have to respect the naming.
6. Alternatively, insert your video with shortcode editor. Insert video in quality you want to set up as default. Select the Quality selection box. We included helpful hint (Show hint) to make sure all your video files are available and using correct format.
Helpful hint will tell you your default video quality and shows you which files have to be available for other quality options. In case your file naming scheme does not match, the hint will point out the mistake. ("Your primary video is not matching the quality prefixes").
This is how the result looks like:
A few notes at the end:
-
HLS handles quality switching internally. Your video provider should be able to create a HLS for you which will already have the different quality versions in it. HLS has one significant advantage: loading of MP4 videos is rather slow on iOS devices which would make manual switching clumsy.
-
The mobile video applies to any mobile device and not every mobile device plays HLS (only iDevices do actually). It's best to use MP4 for mobile video.
-
We recommend that you use following encoding settings with following resolutions and bitrates:
- 480 x 270 px, 356 kbps - your mobile quality
- 640 x 360 px, 700 kbps - SD video
- 1280 x 720 px, 2000 kbps - HD video
Leave a Reply