AirenSoft / OvenPlayer

OvenPlayer is JavaScript-based LLHLS and WebRTC Player for OvenMediaEngine.
https://airensoft.com/ome.html
MIT License
508 stars 126 forks source link

help UI Customize #149

Closed jys923 closed 8 months ago

jys923 commented 4 years ago

How to cover oven player in fullscreen mode when ovenplayer is in fullscreen mode I want to put the chat on top. I created a chat layer and set the zindex 1099,9999. There is still a layer under the ovenplayer. Can you help me?

SangwonOh commented 4 years ago

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

SangwonOh commented 4 years ago

@jys923 Hi. Have you made any progress?

ducle1904 commented 2 years ago

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

SangwonOh commented 2 years ago

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.

ducle1904 commented 2 years ago

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 commented 2 years ago

@SangwonOh Can you help me, please.

SangwonOh commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

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

Thanks!

ducle1904 commented 2 years ago

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

ducle1904 commented 2 years ago

Screenshot 2022-02-15 143421 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 commented 2 years ago

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

Sanjeewa248 commented 1 year ago

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

SangwonOh commented 8 months ago

@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.