Support » Plugin: Flowplayer HTML5 for WordPress » Poster Image Doesn't Load After Upgrade to Version 1.11.2

  • Resolved Michael Samson

    (@illuminice)


    Hi Ulrich,

    I hope you’re doing well. I unfortunately have discovered some new problems in the latest version of Flowplayer quite by chance.

    We’re running the latest version of the plugin, and I of course saw the new integration for Flowplayer 6. I’m using the version 5 script at the moment because I honestly didn’t like the new look of the player controls. I prefer the original look which was flush with the bottom, square, and could be made semi-transparent (it was more minimalistic).

    Today while I was testing our website on a variety of mobile devices I found a brand new issue, specific to tablets. This problem occurred on both iPads and on Android devices, and in at least three different browsers, including Chrome, Safari and the native Android browser (whatever that is).

    The issue I found is with the poster image (not splash image). We use a poster image in order to preload the video. What I saw is that for some reason the poster image is not loading at all. Instead all that loads is the play button. It looks pretty awful obviously. Strangely enough the poster image at the end of the video (we have it configured to return at the end) does work. But the initial poster image that loads with the site is definitely not working. It has always worked in the past and the only change we’ve made recently to this is upgrading the plugin. I should also note that this problem does not occur on desktop devices, even using the same browsers.

    I have tested this problem using both the version 5 and version 6 scripts, and it makes no difference.

    Incidentally there is one other bug, specific to the version 6 script which I did notice right away. The Flowplayer logo is displaying in the bottom left corner of the video, even though we have a valid licence. This is not happening when using the version 5 script. This was part of why I stuck with the version 5 script when I first upgraded a little while back.

    I’d greatly appreciate you looking into this for us. I do not believe any of my CSS is the cause, as it has always worked properly before. Of course, I could be wrong, but need your help to determine the cause.

    Our website is located at http://www.SeattleWeb.Design

    I hope you can help us figure this out quickly, as it’s a bad bug.

    Thanks ahead of time for your help!

    ~ Michael

    https://wordpress.org/plugins/flowplayer5/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Michael Samson

    (@illuminice)

    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

    Plugin Author Ulrich

    (@grapplerulrich)

    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;
    }

    Thread Starter Michael Samson

    (@illuminice)

    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

    Plugin Author Ulrich

    (@grapplerulrich)

    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

    Thread Starter Michael Samson

    (@illuminice)

    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

    Plugin Author Ulrich

    (@grapplerulrich)

    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.

    Thread Starter Michael Samson

    (@illuminice)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Poster Image Doesn't Load After Upgrade to Version 1.11.2’ is closed to new replies.