Multiple Resolutions – Quality Switching

Hello David,

as our licensed user, you can install FV Player Pro (a Pro addon for our plugin) which contains this feature.

Here’s how to get the beta version which has this feature in it:

1) Please upgrade to latest FV Flowplayer.

2) Make sure your license key is in the plugin settings.

3) Open the plugin settings and add &pro_beta=yes to the end of URL and open that. So is you had
“http://your-site.com/wp-admin/options-general.php?page=fvplayer”
it will be
“http://your-site.com/wp-admin/options-general.php?page=fvplayer&pro_beta=yes”

4) You should see the settings page again with a gray notice at the top: “Thank you for purchasing FV Flowplayer license!” and a “Get the FV Player PRO now!”

If you don’t see anything, please de-activate and re-activate the plugin and open the URL from step 3. again.

If you see the button, click it.

5) This will automatically download and install FV Player Pro. Then the page will reload and you will notice there is a “Pro Features” box.

Now I’ll describe the example use:

6) Enter following into the “Video quality switching (beta):” text box:

-360p,Low
-480p,Medium
-720p,High

7) Now insert your video like this:

[fvplayer rtmp="https://cdn.foliovision.com/videos/your-video-480p.mp4" qsel="true"]

The qsel parameters tells the shortcode, that your //cdn.foliovision.com/videos/your-video-480p.mp4 video is also available in -480p and -720p and it also sets the default video quality to play. It literally just replaces “-360p” with “-480p” and “-720p”, so all the videos where you use qsel=”true” have to respect the naming.

So you have to have the following files ready:

/videos/your-video-360p.mp4
/videos/your-video-480p.mp4
/videos/your-video-720p.mp4

8) This was all tested on a fresh site here: ‘http://martin.domainearl.com/2014/04/quality-selection’

Our goal will be to make this work with WP cache plugins (if you do use one, exclude users with fv_player_quality cookie) and also switching the streams on-the-fly – without page reload (at least for most devices).

Thanks,
Martin

Hello David,

thank you for your kind words! We are always full of ideas about how to improve things and we try to listen to our users as well.

Your shortcode will work just fine. MP4 + WebM is not a problem, but an advantage, good to see that you take your video seriously!

I assume that in your case the naming scheme is like following:

640×360,Medium
1280×720,High

In that case, you files:

“https://s3.amazonaws.com/PortraitDrawingCourse/640x360webm/PD5.5_Modeling_the_Ear_640x360.webm”
“https://s3.amazonaws.com/PortraitDrawingCourse/640x360mp4/PD5.5_Modeling_the_Ear_640x360.mp4”

Needs to have higher quality versions:

“https://s3.amazonaws.com/PortraitDrawingCourse/1280x720webm/PD5.5_Modeling_the_Ear_1280x720.webm”
“https://s3.amazonaws.com/PortraitDrawingCourse/1280x720mp4/PD5.5_Modeling_the_Ear_1280x720.mp4”

You are including 640×360 twice in your URLs, so it will be replaced twice.

However if you these files need Amazon S3 access keys, I’m not sure if that will work at this point.

It appears that you will have to swap lines

$media = $this->get_amazon_secure( $media, $this, $url_only );

and

$media = apply_filters( 'fv_flowplayer_video_src', $media, $this );

in fv-wordpress-flowplayer/models/flowplayer-frontend.php and only then it will work.

I’ll be able to test that at start of next week and release a new version if needed.

Thanks,
Martin

Hello David,

please reinstall FV WordPress Flowplayer, it will have the required fix in it.

Then you can install FV Player Pro and get the quality switching.

By the way we recommend your files use prefixes like -mobile, -sd, -hd – much better than -240p, -480p, -720p, as you can vary the resolution across the files as needed.

Thanks,
Martin

I tried to install pro on your plugin and got a error. I really would like to use that.

Parse error: syntax error, unexpected T_FUNCTION in ...plugins/fv-player-pro/fv-player-pro.php on line 552

Also. On your example the selection of over the video. Wouldn’t it be best to have it on the bar?

PHP version: 5.2.17.

I now set the setting to PHP 5.5. I don’t know how long it will take for it to save.

Hello Chan,

Glad to hear FV Player Pro works for you now. We will prepare the documentation for the quality switching, basically you need to enter something like this into its configuration box:

_432,Low
_720,High

Then in each video which is available in both qualities, you need to add qsel=”true” into the shortcode.

The quality selection buttons show up above the video. It could be integrated into the control bar at some point, it’s just a lot of styling to do and we put priority on making sure this works without having to reload the video.

Thanks,
Martin

Hello Chan,

Quality switching – your setup has some issues:

1) You only need to type in the video file once. Just input the video URL in the quality which you want as default. You currently have all three of them. So only keep this one:

http://example.rackcdn.com/5-4-14-432.mp4

2) Then fix your configuration of the quality types. It appears you have:

-360p,Low

-432p,Medium

-720p,High

While it should be:

-720,High

-432,Medium

-360,Low

You enter this together with qsel=”true” so that you don’t have to always enter all the video qualities. The file names must contain the “-720”, “-432” or “-360” part in URLs though.

3) The buttons are not looking the best on your website, we will make the styling more resilient.

Thanks,
Martin

Hello Chan,

it works for me now. Also, I’m not noticing any buffering issues.

You can include other file types, but HLS is currently not supported, as HLS contains automated quality switching built-in. But you can use RTMP for better streaming to devices which can’t play MP4 using HTML5 (Firefox on Mac, old Internet Explorer, Linux computers).

Thanks,
Martin

It seems to be a bug. I tried your site example of switching and it still does the same thing. I just wanted to let you know. It’s not really a big deal but it is a bug.
Also, I tried the Rackspace ios and streaming url for different src to make sure the file would play on all devices in a test page I made to try it. The switch will not shop up them. The video tested ok but will show the switch. It might be because as the end of the url is the same file name just different server feed. Would I have to rename the file alittle differently but with the same ending prefix and upload them for that to work?

Hello Chan,

1) The iPad bug – having to click the player 3 times – I can confirm this is related to the quality switching. I’ll work on fixing it tomorrow. We released FV Player Pro into public today, so our auto-updates channel is ready.

In our testing we avoided this by adding HLS I think.

2) Quality switching should work across servers. Could you please post the shortcode you used? Oh, I see you found the error in the shortcode.

3) Firefox issue – could you please double check that your video is available in all the qualities? If you provided WebM for Firefox, double-check that it’s there in all the qualities.

Thank you for all the useful feedback!

Martin

Hi Chan,

Thanks for the info on our big update.

We do do custom development. Please drop me a support ticket.

Thanks for being part of Foliovision!

Hello Chan,

the quality switching now happens live (no page reload): http://foliovision.com/2014/06/video-multiple-qualities

Thanks,
Martin

The quality switching it now broke with the latest pro update.

http://revivalishere.org/sermons/video-6-1-14-revival-is-here-church-service/

Hello Chan,

thank you for the bug report!

I see the problem and I see what’s wrong, but I can’t reproduce the problem. Could you please:

1) check step 6. in our guide here? http://foliovision.com/player/switch-video-quality What does the “Show hint” feature say? Does it recognize the quality prefixes properly? In your case if you enter your video like

`http://your-server.com/6-1-14-360.mp4`

It should say it will look for:

http://your-server.com/6-1-14-432.mp4

http://your-server.com/6-1-14-720.mp4

2) post the exact shortcode you are using and the content of your Settings -> FV WordPress Flowplayer -> Pro Features -> Video quality switching textarea?

3) I checked your video files and I wouldn’t recommend you use HD (720p) for these videos at all as your camera picture quality is not sharp enough. On the other hand, your low quality (360p) is creating quite big files already. You should be fine with using our mobile and SD qualities as recommended at the end of our article here: http://foliovision.com/player/switch-video-quality

I also recommend you use -sd and -mobile as your quality prefixes, so you can change the resolutions a bit with any file if needed. You would have to rename all of your files which you already use though.

Thanks,
Martin

Hello Chan,

could you please address (1) and (2) from my last post specifically?

I’m not able to reproduce this bug.

Thanks,
Martin

-720,High
-432,Medium
-360,Low

that is the short code. That is the one you said to use that was working.

It works now

Hello Chan,

there is no limit on number of the video qualities, but it’s best to keep the count down – the lowest quality video out of three should be already optimized for mobile. We plan to add a mobile auto-detection, to make sure mobile users get that video right away.

If you can provide a sample URLs for some Rackspace video (we won’t make the URLs public if you don’t want to), then we can recommend how to embed it.

Thanks,
Martin