CODEWITHSUNDEEP
iosswift
Gurpal Rajput
Gurpal Rajput

Reputation: 41

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

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

Upvotes: 2

Views: 1239

Answers (1)

DevJASH
DevJASH

Reputation: 87

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.

Upvotes: 1

Related Questions