How should I add custom view over mobile vlc kit in iOS - ios

Question

I want to show some custom control over vlc player,but when i am trying to do so, my control hides when actual video start running in player
player = VLCMediaPlayer()
player.media = VLCMedia(url: URL(string: "rtmp://сс.tv/sea")!)
player.drawable = view
let abc = uiview()
view.addsubview(abc)
I had tried to show uiview over my vlc player but failed to do so
player = VLCMediaPlayer()
player.media = VLCMedia(url: URL(string: "rtmp://сс.tv/sea")!)
player.drawable = view
I need to show some custom view whenever my video plays they should be visible , any help will pe appreciable

Answer 1

To add an overlay with custom controls you have to create a separate UIView which will hold the player, and create a controls UIView too. The first one should look something like this, with your own frame:
let root = UIView()
root.frame.size.height = UIScreen.main.bounds.width
root.frame.size.width = UIScreen.main.bounds.height
Now we can set "root" to be the main video rendering view for the player:
mediaPlayer.drawable = root
Create your custom controls view which will display on top of the player:
var child = UIHostingController(rootView: ControlsVLC())
child.view.frame.size.height = UIScreen.main.bounds.width
child.view.frame.size.width = UIScreen.main.bounds.height
child.view.backgroundColor = .clear // You will need to add this so you can see the video behind the controls
child.view.isOpaque = false
Lastly, you have to add them as subviews accordingly so the controls will display on top of the video:
self.addSubview(root)
self.addSubview(child.view)
self.bringSubviewToFront(child.view)
self.sendSubviewToBack(root) // Not sure if necessary but works
Be aware that this was done with SwiftUI on iOS 16.
Your final code should look something like below:
class PlayerUIView: UIView, VLCMediaPlayerDelegate {
var mediaPlayer = VLCMediaPlayer()
override init(frame: CGRect) {
super.init(frame: frame)
let root = UIView()
root.frame.size.height = UIScreen.main.bounds.width
root.frame.size.width = UIScreen.main.bounds.height
let url = URL(string: "your.source")!//replace your resource here
mediaPlayer.media = VLCMedia(url: url)
mediaPlayer.delegate = self
mediaPlayer.drawable = root
mediaPlayer.play()
var child = UIHostingController(rootView: ControlsVLC())
child.view.frame.size.height = UIScreen.main.bounds.width
child.view.frame.size.width = UIScreen.main.bounds.height
child.view.backgroundColor = .clear
child.view.isOpaque = false
self.addSubview(root)
self.addSubview(child.view)
self.bringSubviewToFront(child.view)
self.sendSubviewToBack(root)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
}
}
This worked for me.