Poster Image Doesn't Load After Upgrade to Version 1.11.2

Hi Ulrich,

I haven’t heard from you which is a bit surprising… you’ve always been very fast to respond before.

I wanted to let you know that we ended up switching to a Splash Image configuration instead of a Poster Image. The real reason we were using a Poster before was because we wanted to pre-load the video. But as it turns out pre-loading was really slowing down the loading of our home page. We decided it was better for our site not to pre-load anymore. This meant we no longer needed to use a Poster Image specifically. I decided to therefore switch it to a Splash Image to see if it would resolve the problem, which it did.

Whatever had broken the Poster Image from working was limited to the poster alone. I honestly don’t know what had changed, but is had something to do with the way the CSS was interpreted in those tablets.

The strange part here is that we’re still using a Poster Image at the end of the video, to show the same image when the video ends. For some reason the poster at the end had no problem. It was only the initial Poster Image that stopped working. This makes no sense to me since they use practically the same CSS in order to work. Go figure.

It would be beneficial to have a setting specific to Splash Images, so we can set an image for the end of the video. There could be a “beginning” splash and a “ending” splash. That’s really what’s needed. Then we wouldn’t need to use a poster technique at all.

Lastly, I had originally reported that the license was not working when using the version 6 script. That’s still a problem that must be addressed. Frankly, the poster issue is still an issue too, but we circumvented it.

Well, I guess that’s it for the moment. I hope to hear back from you soon.

All my best,

~ Michael

Hi Michael

Sorry for the delayed reply. I did not have access to a computer to fully look at the issue.

You are not able to use the v5 licence with v6. You need to upgrade your existing licence for it to work. https://flowplayer.org/news/releases/html5/v.6.0.0.html

How did you set up the poster?

If you add the following CSS the splash image should always show at the end of the video.

.flowplayer-video.is-finished video,
.flowplayer-video.is-finished object {
	display:none;
}

Hi Ulrich,

Thanks for getting back to me. I knew you’d respond eventually. No worries.

I’ve gone ahead and upgraded our license today for Version 6. I already have the new license code and it’s working nicely. The only thing I’m unhappy about is that the code doesn’t work for Version 5 as well. Though, at this point I doubt I’ll be going back to 5.

I’ve edited our CSS today and implemented the solution you provided above to show the splash at the end of the video. I had something very similar in place to this before, but it used a poster image (via a background directly in the css). I noticed the splash image also uses a background attribute, though it’s done via inline. I have this all working nicely now with only a splash image technique. The poster image is completely gone now from both the beginning and end of the video.

I did notice one apparent bug in version 6. I have the “brand” element set to display our company name, and yet it won’t display. I’ve entered the name in the settings and clicked the checkbox to display it on our site. But it’s definitely not working, and it even says no-brand in the css. This is something you should look into.

The only other bug is an old one, which is in Firefox only. Basically the background image (splash) can be seen by 1px in the right side of the video when the video is paused. I’ve corrected for this in the past when we were using a poster image, but I can’t use that correction anymore with the splash implementation. It’s too complicated to explain here, but basically the inline nature of the splash image conflicted with my prior solution. If you view our video in Firefox and pause it, you’ll see 1px of red on the right side, which is from the splash image. This doesn’t happen in Chrome by comparison.

Regarding what went wrong with the poster in our original implementation, it’s tough to say at this point (it was likely css related), and it’s no longer relevant. Now that we’re no longer pre-loading, a splash setup makes much more sense. It’s advantageous not to load the video player unless it’s clicked. We’ve been working to lighten the load of our home page (and site as a whole), and switching to a splash config is inline with this.

Lastly, I do actually like the new player controls in version 6. They’re bolder and easier to use. So I changed my mind about this. I also saw that the css attributes were maintained, and so my original customizations all still work. No complaints about this at all.

I think that covers everything. If you can help with the remaining two bugs please let me know.

All my best,

~ Michael

I have asked my colleagues about the issue in Firefox but have not received a reply yet. You can use the following CSS fix for the moment.

.playful.is-paused.is-ready:not(.is-finished){
  background: none!important;
}

I found the issue for the brand not showing on your own site. I have fixed it and hope to release an update with the fix soon.
https://github.com/flowplayer/wordpress-flowplayer/commit/ca66ba4423adcdcd93a9970dec1c331b3a4da53a

Hi Ulrich,

I actually tried that exact solution you provided last week, and it unfortunately didn’t work. I’m very good with CSS, and also thought of trying the :not selector. For some reason it wasn’t effective. The only solution I’ve found that does work is to load the background via a normal css background instead of the inline version used by the splash. It’s then possible to hide the background during play and pause, and override to display it at the end of the video. I used this technique when we were using a poster image to fix that 1px Safari problem. But with the splash image and it using an inline background, you couldn’t do it that way. I know I could have fixed it the old way, but I’m trying to maintain that inline background.

If your colleagues can fix the problem in Firefox on the back-end, that would be awesome. For the moment I’m just living with it. I did notice it was more problematic when the video is paused, as opposed to playing.

As for the brand not showing, thank you for taking care of it. I’ll look to make sure that’s working when we update the plugin next.

Other than these things we’re now in perfect shape. My thanks as always for your help!

~ Michael

I checked with my colleagues and they could not find a solution. I kept on coming back to this and now wanted to give a small update.

The reason the image is not showing when the video is playing is this CSS:
.flowplayer.is-playing{background-image:none !important;background-color:#333;}

The CSS that I provided should work as it is also set as important.

.playful.is-paused.is-ready:not(.is-finished){
  background: none!important;
}

I hope to release an update in the next week.

Hi Ulrich,

I appreciate the follow up. I’ll give your CSS solution one more try when I have a free moment. It’s really a very minor problem considering it only occurs in Firefox and when pausing the video.

It would be nice to have that brand name showing though, so I look forward to the update.

All my best,

~ Michael