I am reproducing a Youtube video in my iOS app. the problem I am facing is when the video plays it plays in the native video player for iOS.
Thats ok for me, but I want to disable the controls in the native player so the user cannot skip the video.
Is this possible?
This is my code :
func setUpUI() {
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
webView.backgroundColor = .red
self.backgroundColor = .white
webView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(mainContainer)
mainContainer.addSubview(lineSeparator)
mainContainer.addSubview(bottomLineSeparator)
mainContainer.addSubview(videoIcon)
mainContainer.addSubview(watchItAll)
mainContainer.addSubview(videoContainer)
videoContainer.addSubview(videoTitleContainer)
videoContainer.addSubview(webView)
videoTitleContainer.addSubview(videoTitleLabel)
lineSeparator.backgroundColor = .lightGreyBkgrnd
lineSeparator.layer.borderColor = UIColor.lightGreyBkgrnd.cgColor
lineSeparator.layer.borderWidth = 3
videoContainer.layer.borderColor = UIColor.dimGray.cgColor
videoContainer.layer.borderWidth = 2
bottomLineSeparator.backgroundColor = .lightGreyBkgrnd
bottomLineSeparator.layer.borderColor = UIColor.lightGreyBkgrnd.cgColor
bottomLineSeparator.layer.borderWidth = 3
self.videoTitleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
self.videoTitleLabel.textColor = UIColor.tuftsBlue
videoPlayerSuperView.translatesAutoresizingMaskIntoConstraints = false
self.watchItAll.font = UIFont.preferredFont(forTextStyle: .body)
self.watchItAll.numberOfLines = 0
//videoContainer.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(videoTapped)))
let html = """
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/0oBx7Jg4m-o?autoplay=0&showinfo&controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
"""
webView.loadHTMLString(html, baseURL: nil)
}
If you are using AVPlayerViewController to play the video, it has a property
open var showsPlaybackControlls: Bool
that you can set to NO to hide user controls.
Also, if you highlight the class and choose "Go to Definition", you will see other functions and properties of the class that you might want to decide to use.
Related
Unable to load "https://dev-react.ndh01.com" this url only in WKWebView in swift. But it is loading in browser and Android Webview
you are not doing anything wrong and technically your webpage is loading properly, but this website is not optimized for all screen sizes, you can verify this by rotating your test device whether you using a simulator or physical device
import UIKit
import WebKit
class WebViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let preferences = WKPreferences()
preferences.javaScriptEnabled = true
preferences.javaScriptCanOpenWindowsAutomatically = true
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
let webview = WKWebView(frame: .zero, configuration: configuration)
view.addSubview(webview)
webview.load(URLRequest(url: URL(string: "https://dev-react.ndh01.com")!))
webview.translatesAutoresizingMaskIntoConstraints = false
webview.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
webview.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
webview.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
webview.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
}
if you are using a simulator try pressing Cmd + right/left arrow to rotate the device to landscape
you will find a screen showing your web page
First of all... My other question got marked as a duplicate even though the question suggested was the exact opposite, so:
Inside my webView I do not want to be redirected to other apps. WKWebView should never redirect to other Apps. Instead it should just open the url.
This is my webView:
lazy var webView: WKWebView = {
let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
webView.translatesAutoresizingMaskIntoConstraints = false
return webView
}()
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
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.
I want my video to stream in the view not takeover the screen, ive specified that every way, toggled the option in storyboards and still nothing. any thoughts or ideas, maybe something im missing, please feel free to test the code your self and see the result (fills the entire screen, and still unable to play inline.)
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webConfiguration.mediaTypesRequiringUserActionForPlayback = []
LiveStream = WKWebView(frame: CGRect(x: 0, y: 0, width: 375, height: 300), configuration: webConfiguration)
self.view.addSubview(LiveStream)
if let videoURL:URL = URL(string: "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8?playsinline=1") {
let request:URLRequest = URLRequest(url: videoURL)
LiveStream.load(request)
}
Edited the link to a 24/7 uptime (https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8?playsinline=1)
I am seeing some mistakes here.
First of all you have already added WKWebView in your storyboard and I am guessing that from your
#IBOutlet var LiveStream: WKWebView!
and you are also adding it into your view again with
self.view.addSubview(LiveStream)
Which is not correct way to add it.
You can use UIView for that.
For that add a UIView in your storyboard and create IBOutlet for that
#IBOutlet weak var viewForEmbeddingWebView: UIView!
then declare an instance var LiveStream: WKWebView!
Now you can configure LiveStream as shown below:
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webConfiguration.mediaTypesRequiringUserActionForPlayback = []
LiveStream = WKWebView(frame: viewForEmbeddingWebView.frame, configuration: webConfiguration)
self.viewForEmbeddingWebView.addSubview(LiveStream)
if let videoURL:URL = URL(string: "https://www.youtube.com/embed/9n1e1N0Sa9k?playsinline=1") {
let request:URLRequest = URLRequest(url: videoURL)
LiveStream.load(request)
}
And your result will be:
As you have noticed video is playing inside the WKWebView not in full screen.
Note:
Your URL wasn't working for me so I have used another URL for demonstrate.
I have a UIView and set constraints on it as the image below shows . When I open it in the simulator it works correctly . The problem comes when I try and add a WKWEBview to display a video and add the subview . I want the video to take the dimensions of the UIView but the video looks extra small and the UIView looks like it shrinks . How can I fix that so that the video takes the full dimensions of the UIView . As you can see from the constraints it set to trail and leading and the video is not taking up that width even though it is large enough . The only thing I can think of for fixing this is adding a
addChildViewController(ViewController)
however the WKWebview does not have a Controller any suggestions would be great .
class ExampleTable: UIViewController, WKUIDelegate {
#IBOutlet weak var newView: UIView!
var myWKWEBVIEW: WKWebView?
override func viewDidLoad() {
super.viewDidLoad()
myWKWEBVIEW?.uiDelegate = self
guard let movieURL = URL(string: "my video url")
else { return }
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webConfiguration.mediaTypesRequiringUserActionForPlayback = .audio
myWKWEBVIEW = WKWebView(frame: newView.frame,configuration: webConfiguration)
newView.addSubview(myWKWEBVIEW!)
DispatchQueue.main.async (execute: { () -> Void in
self.myWKWEBVIEW?.loadHTMLString("<video height=\"\(self.newView.frame.height)\" width=\"\(self.newView.frame.width)\" muted=\"muted\" autoplay=\"autoplay\" src=\"\(movieURL)\" playsinline/>", baseURL: nil)
})
}
}
My constraints
How it looks with no addsubview
How it looks when I add subview to display video
Can you please check the below code :
myWKWEBVIEW = WKWebView(frame: CGRect(origin: CGPoint(x:0,y:0), size: newView.frame.size),configuration: webConfiguration)