help UI Customize

[airensoft]

help UI Customize

[SangwonOh]

Because it is literally full screen, so we cannot place other elements on top of full screen elements.

You can use a trick to insert the element with javascript into the div.op-ui element, then make it visible only if the player wrapper element (div.ovenplayer) has the op-fullscreen class.

[SangwonOh]

@jys923 Hi. Colud you give us a html and css code samples you wrote ?

[SangwonOh]

@jys923 Hi. Have you made any progress?

[ducle1904]

Hello, I have the same issue here, I have a custom button and want to have it when in full screen mode, but it can't see, it's under the overlay

[ducle1904]

Hi, thanks for the helpful answer. But I have another question, currently I have 2 camera, I want to know which camera are in full screen mode, as I do is check the class op-fullscreen, but both div.ovenplayer have that class, so how can I detect? Thank you.

[ducle1904]

@SangwonOh Can you help me, please.

[SangwonOh]

@ducle1904 Hi.

I have 2 camera, I want to know which camera are in full screen mode

What does camera mean? Are you talking about OvenPlayer?

but both div.ovenplayer have that class

Why are both OvenPlayers in full screen? Perhaps your application actually made both players fullscreen.

[ducle1904]

@SangwonOh What does camera mean? Are you talking about OvenPlayer?
Yes, I mean Ovenplayer
Why are both OvenPlayers in full screen? Perhaps your application actually made both players fullscreen.
I don't know why, but when I click 1 Ovenplayer in fullscreen mode and check for the class op-fullscreen, I see that the other one have that too.
So have any solution for me to check which Ovenplayer are in full screen mode? Because I haven't edit the Ovenplayer source code.
Thank you

[SangwonOh]

@ducle1904 It seems that there is a bug where once one player goes fullscreen, the op-fullscreen class is also attached to other players. We will fix it soon and let you know. Thanks!

[SangwonOh]

@ducle1904 Fixed full screen malfunction. Please check in the latest version.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ovenplayer.js"></script>
or
https://github.com/AirenSoft/OvenPlayer/releases/tag/v0.10.17

Thanks!

[ducle1904]

@SangwonOh Nice, Thanks for the enthusiastic help, thats help me a lot.

[ducle1904]

Hello @SangwonOh , I have done to add the button into the full screen mode, but I can't run a function that I have embed to the button.
I have try to get that button by Js and addEventListener but it's not working.
Do you have any solution to help me?

[SangwonOh]

@ducle1904 Hi. Can you show me where the button is located using the element tab of the developer tools?

[Sanjeewa248]

Can I hide the play button, setting icon, and full screen icon ?

[SangwonOh]

@Sanjeewa248
hide the play button
https://airensoft.gitbook.io/ovenplayer/initialization#showbigplaybutton
To hide setting icon, and full screen add style in your application.

.op-controls-container .op-bottom-panel .op-controls .op-right-controls {
    display: none;
}

Also We are closing the issue due to a long period of inactivity.