controlbar not visible after update – and Picture In Picture request | Topics

tcnet 4 years, 5 months ago

after upgrading to 7.4.24.727 – the control bar has disappeared, along with the Play Button, the rewind 10 button, the full screen button.

This is with Players that were already on a page, as well as new ones that I added.

I reverted back to 7.3.19.727, the controlbar came back but the other buttons did not.

Any idea on what happened?

Viewing 12 replies - 1 through 12 (of 12 total)

Juraj Kacaba 4 years ago

Hello tcnet,

There’s a chance that some of CSS stylesheets are missing. Please try completely deactivating and deleting both FV Player and FV Player Pro and install both plugin again. WordPress will warn you that you might lose some data but that’s not the case with FV Player.

If this won’t help could you please set-up a test page for us? We would like to check it.

Thanks,
Juraj

tcnet 4 years ago

Our site has not launched yet and does not have any visible public pages. How can I send you a password protected page, outside of this forum?

Thanks,!

tcnet 4 years ago

to add to the above, I did do a deactivate and the uninstall and then re-installed but no changes. Could it be something with the FV Player Database (since it’s still persisting)? It was working fine, and then we did an upgrade and that broke it immediately.

Thanks!

Juraj Kacaba 4 years ago

Hello tcnet,

Thanks for trying the re-install. The issue might be caused by many things, first of all we would like to check if the css elements are even there but hidden or if the stylesheets are completely missing.

Regarding the login, please contact us via our support e-mail.

Thanks,
Juraj

tcnet 4 years ago

Solved!

In the development of my site, our CDN had the Flowplayer licence and I had been utilizing that for some testing, so I had the Flowplayer js items in my header. This didn’t cause any issues before, but after the latest upgrade, caused havoc to the FV Player controls. I just removed it and we have all of our controls back.

So it doesn’t seem to work to have Flowplayer and FV Player on the same wordpress site.

FYI, one side effect that I had noticed from having both of them, was I noticed a PiP button next to the Playlists and when I clicked it, I got Picture in Picture functionality. I was able to leave the browser and go to my Desktop and the player followed me, same as requested in this forum post:
https://foliovision.com/support/fv-wordpress-flowplayer/requests-and-feedback/youtube-picture-in-picture

PiP is a feature we would like. How hard would it be to implement it, since PiP is a native plugin to Flowplayer? Compatibility
Flowplayer Native 1.0.4 and above. It seemed to actually work with your plugin with this Javascript:

——
<link rel=”stylesheet” href=”//releases.flowplayer.org/7.2.7/skin/skin.css” >

<!– jQuery library, include only once in the website –>
<script src=”//code.jquery.com/jquery-1.12.4.min.js”></script>

<!– hls.js –>
<script src=”//cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.light.min.js”></script>

<!– Flowplayer library –>
<script src=”//releases.flowplayer.org/7.2.7/flowplayer.min.js”></script>

Juraj Kacaba 4 years ago

Hello tcnet,

Amazing! We’re glad that you’ve found solution. We’ll check what could cause these interface issues caused by storing .js in the header with the latest update.

I’ll discuss the pip integration with our development team, thanks for providing the code!

Making the web work for you,
Juraj

tcnet 4 years ago

Juraj,
I have an update on the PiP. I don’t think it’s the Flowplayer js files.

I see it working now in FV Player , w/ those js files no longer in my header, but only in Firefox. In Chrome & Safari it doesn’t show it. But in Firefox it does. I took some screen shots. Any chance it can be implemented in the other browsers?

Thanks,
David

PiP_inAction
PiP_bar
PiP_icon

Martin 4 years ago

Hello tcnet,

I think the last time we had somebody wonder about the Firefox Picture in Picture the request was to get rid of it.

It’s actually a Firefox-only feature as you noted. FV Player can only do what’s possible in the browser window, so that is the Sticky video feature: https://foliovision.com/player/advanced/sticky-video

Thanks,
Martin

tcnet 4 years ago

Hi Martin,
I’ve seen it work for both. I’ve seen picture in picture in both Chrome and Safari.

I have attached a PiP shown in Safari and here it is in Chrome on the YouTube sight (Right click and then Right click to get the menu). but you can also do with with any mp4.

1)
Go to this URL:
https://www.appsloveworld.com/download-sample-mp4-video-mp4-test-videos/

2)
download test video:
https://docs.google.com/uc?export=download&id=112xg44sZBeicWXsVm4ToVGUrEHeLjbYf

3. drag test video from desktop to chrome browser

4. right click on video and select PiP

end users just need Chrome 70 or higher. But I can’t right click in a FV Player video and select it, it just gives me FlowPlayer AB info… can we add a contextual menu for PiP or better yet, a button for end users to press?

Thanks,
David

PiP_Chrome
PIP_Safari
Martin 4 years ago
Hello tcnet,

I see it works when using a bar HTML5 video tag.

I see, you can also just put a button somewhere on your page:
```
<button id="pipButtonElement"></button>
```
And then add a script for it to work with video in FV Player.
```
pipButtonElement.addEventListener('click', function() {
  jQuery('.flowplayer.is-ready video')[0].requestPictureInPicture();
});
```
I will check with Alec if we would like to add this as an optional button in FV Player control bar.

Thanks,
Martin
tcnet 4 years ago

Hi Martin,
Thanks, I’ll give it a try! Where do I put the javascript? In a WordPress HTML field, or a header?

Thanks,
David

Martin 4 years ago

Hello tcnet,

it’s not really ready for real use, I just posted that in case you like to play with JavaScript. You could inject it to the site footer using wp_footer action hook in your theme functions.php file.

To make it work you would also have to also add something like var pipButtonElement = document.getElementById(‘pipButtonElement’);

Thanks,
Martin