Foliovision › Forums › FV Player › Requests and Feedback › Lightbox, Share buttons, Quality switching
-
I have several frustrating issues with this plugin
1) Lightboxed videos don’t display a dimmed background. The background is a little blurred, but it’s white (same as my site). It’s not dimmed/dark. I tried alternately to use the html code the software suggests, and that doesn’t work at all, it just opens a window with the video in it.2) Facebook share button displays crazy text. Not my post’s description. It makes the Facebook share button useless because the shared post looks absolutely crazy
3) Quality switching isn’t working. It defaults to mobile every time. Then when I try to switch to HD or SD the video doesn’t play. I’m using vimeo pro. I think I have the access token set up correctly. But I didn’t need all of that craziness when I was using SublimeVideo Player with quality switching; it just worked
The more I try to apply everything the Pro version offers, the more I annoyed I get at all of the things that don’t work correctly in some small but significant way. Instructions don’t include necessary details, or when I follow them perfectly I don’t get a good result. I’m very disappointed.
-
-
Hello Tim,
as you own the FV Flowplayer license, could you please send the exact URL on your website where we can see these issues? That will make troubleshooting much easier. We will keep the URL private if you wish to.
1) Lightbox styling problem – this looks like a conflict in CSS. Could be fixed by reenforcing our CSS.
2) Facebook descriptions – this might be caused by some plugin conflict. We should be able to put in better filtering for any shortcodes etc. which don’t make much sense to be used in short post descriptions.
3) Quality switching – if you are using the Vimeo Pro video URLs, then this could in theory work, but the signature changes for each file, so unfortunately it won’t work.
If you use our integration then this is something which we need to add. At this point, the mobile devices get the mobile quality video automatically, but there is no manual selection.
4) Could you please let us know which instructions should be improved? We will be more than happy to work on these and make this work for you.
Thanks,
MartinMartin:
I have set up a password-protected post with 3 implementations of the player for testing.First implementation on that post is just a standard single video. Works fine, except for the Facebook share link.
Second implementation is quality switching. This worked only once where the video started in HD, and I was able to switch to SD, however I was not able to switch back to HD again. So I then refreshed the page, and the video started in SD this time, and didn’t allow me to switch to HD.
When I first wrote to you about this quality switching issue I was using Vimeo’s external player links. For testing purposes this post uses links to my CDN (not Vimeo) to make the testing cleaner. Yet it still doesn’t work. Also there is no mobile version for this test because I didn’t encode one). But when I was using mobile versions a few days ago (vimeo’s links), the player always played the mobile version by default, no matter what…even though I’m testing on a desktop browser. No matter what order I put the video links in, it ALWAYS defaulted to the mobile video, and never let me switch to SD or HD.
Third implementation is lightbox, which is very important for me. It does work, but it isn’t dimming the background.
These are functions that are very important to how I use the player and I hope we can get them to work. Thanks for your help, and thank you for developing a wonderful player plugin.
Hello Tim,
thank your for the details!
1) Facebook share link – the link only contains the page URL and nothing else. So if Facebook generates improper description for the share it’s caused by your website. I can’t test this with your test post as it’s private (it says “There is no excerpt because this is a protected post.”).
I see you use Yoast WordPress SEO plugin – so I’m a bit surprised it dosn’t work properly for you.
Can you copy what the description looks like on Facebook?
2) Lightbox issue – this is caused by your theme which contains different styling for colobox Lightbox library (which we use).
So we should change our Colorbox prefix – that will change the element IDs and will be more resilient. We will work on that. As a quick fix you can comment out the Colorbox CSS rules in your theme CSS (look for “Gallery popup”, that’s where the section starts).
3) Quality switching – it appears you provided your MP4 file from two locations:
video.your-domain.com – containing only your HD video
cdn.your-domain.com – containing only your SD videoUnfortunately this is not how it works and I see what you tried to do (provide URL for each quality version hoping that it will be picked up by the matching quality setting), but I believe what we have is simple to use as well:
You need to put your video at URL like ‘http://video.your-domain.com/your-video-HD.mp4’ and then put the SD version into the same location, only change the “-HD” part of the file name to “-SD”: ‘http://video.your-domain.com/your-video-SD.mp4’
So when you have a look at the video directory listing, you should see:
your-video-HD.mp4
your-video-SD.mp4
your-video-mobile.mp4All of them should be on (nearly) the same URL:
‘http://videos.my-site.com/lessons/my-lesson-HD.mp4’
‘http://videos.my-site.com/lessons/my-lesson-SD.mp4’
‘http://videos.my-site.com/lessons/my-lesson-mobile.mp4’Then it will work perfectly, as you can see on our demo: https://foliovision.com/player/demos/flowplayer-quality-switching
Please let us know if it makes sense now.
Thanks,
MartinI have made the post public, instead of password protected. Just in case you need that.
1. Ah! Yes, when putting data into the SEO fields, you’re absolutely right, the Facebook share links only displays what’s there. I hadn’t considered that, because in earlier tests the share link was ignoring what I had in the Excerpt field (separate from the SEO fields). So I didn’t think the blank SEO fields would result in this problem. But you’re right, that did fix it. Thank you!!!
2. Where would I generally find the “Gallery Popup” css? Is that usually in a universal CSS file in wordpress? For example, is it usually found in style.css, etc. etc.?
3. Regarding quality switching; this still didn’t work even when I was using Vimeo’s links, which are all the same location, but different naming strings for SD and HD versions. HOWEVER it does work now that all of the links are on the same root URL. Thank you again!
So far so good. Once I get the lightbox feature working correctly I’ll be ready to roll out this player. Very exciting!
2) Actually I found the gallery popup styling. It was in style.css. I didn’t comment anything out (there seem to be a lot there) but I changed the color of the backdrop and it’s working now.
I think all of my issues have been addressed and I want to thank you for your help, and for helping me so quickly. I was very eager to begin rolling out this player and I was very disheartened when I discovered these issues.
3) One last thing: Is there going to be a problem using Vimeo Pro? As I said, using vimeo pro for the quality switching definitely didn’t work, but I’m not too concerned about that.
When I want to offer quality switching I’ll host the videos on my own CDN. But what I have been doing is offering SD video to public, and HD video only to subscribers. Sometimes I host the HD video myself (for better performance) but sometimes I use the vimeo pro links to provide the HD video if it’s a very long episode. Is this going to be a problem?
I have enabled Vimeo Pro in the plugin settings, and I THINK I have correctly installed the access token.
Thank you again. This player is a perfect implementation of FLowplayer, with all of the features of Flowplayer. But Flowplayer doesn’t provide a plugin for wordpress that easily enables those features. But you guys have done that. It’s really great work you have done!
3) Oh wait, one last thing. The quality switching is now defaulting to Mobile again. How do I force it to default to the SD or HD version and not the mobile version?
The mobile version is the 3rd source link in the short code. The first source link is the HD version, second is the SD version. The short code editor says “Your primary video matches HD quality” but it is not playing the HD video by default. If you go to the link I originally sent you you can test it for yourself.
This is not a major issue for me, as I will almost never offer a mobile version, but I’d still like to understand why the player is doing that, and how I can fix it. Thanks again!
Hello Tim,
3) Quality switching – if you have Vimeo Pro account, simply put your video on Vimeo and let our plugin take care of the rest. No need to host SD video in one location and the HD location in the other. No need to only host long videos on Vimeo.
By only using Vimeo, you will use a single workflow which will make things easier for you. We will improve our player to allow quality switching for Vimeo videos. This will also take care of the mobile video issue for you as Vimeo encodes for mobile separately.
Defaulting to mobile – I’m not sure about this, it appears your shortcode is setup like this (I omitted the splash screen etc.):
[fvplayer src="http://video.your-site/video-HD.mp4" src1="http://video.your-site/video-SD.mp4" src2="http://video.your-site/video-mobile.mp4" qsel="true"]
This is actually not needed and this must be what breaks the quality switching for you. You only need to enter:
[fvplayer src="http://video.your-site/video-HD.mp4" qsel="true"]
Then our plugin will see that you enabled quality switching for the video and that the video matches the -HD quality and will add up -SD and -mobile automatically.
This is not perfect, as if you skip the mobile version for one video, it will still show the mobile quality button. However our aim was to provide a simple workflow. We recommend to follow the same practice for each video.
Thanks,
Martin“Then our plugin will see that you enabled quality switching for the video and that the video matches the -HD quality and will add up -SD and -mobile automatically.”
AH! Okay, so as long as I maintain the same naming convention (-SD -HD -Mobile) I only have to put in the HD version in the short code, and the player will automatically switch to the other files when the user switches quality settings? No need to put in the other two video files? That’s great.
If I can ask, what then is the purpose of putting in multiple formats in the short code? Is that so there can be different formats other than mp4 (if I provide them?).
Hello Tim,
yes, you only enter one file URL in the shortcode and then our plugin will figure out the URLs of the other quality versions. What you put in will be the default. Please note that our player uses browser cookies to remember the quality settings.
Around 70% of browsers support MP4 video format. The rest needs the Adobe Flash plugin or WebM format.
Thanks,
MartinTHANK YOU very much. The quality settings is one of the areas where your documentation wasn’t entirely clear. What I have learned in this exchange with you is completely new to me. Maybe I misread your documentation.
I appreciate the hard work your team has put into this plugin. It’s truly brilliant. I am also thankful for your patience and help in resolving these issues with me. Good luck to all of you!
TimHi Tim,
Thanks for your detailed notes.
As Martin says, we’ll improve Vimeo quality switching so you can boldly go on using Vimeo as you’d like. We consider Vimeo to the best value and easiest to use video hosting on the web and will be supporting Vimeo hosting with a full feature set.
Making the web work for you, Alec
Hi. I have recently downloaded and installed the latest version. But VimeoPro quality switching is not working. I have it selected in the VimeoPro window in the plugins settings, but when I insert a video, and click to enable quality switching, it does not work. The video plays without quality switching buttons. I don’t know what I’m doing wrong. Your documentation doesn’t make it entirely clear to me. I’m referencing what you have here: https://foliovision.com/player/how-to-use-vimeo-pro#quality
If you go through the instructions, you’ll see that it’s either missing some steps, or maybe I’m misunderstanding it. I’m trying to follow it, but it isn’t giving me much guidance. Thanks for your help.