In my app I use WKWebView and the user can go to different websites like google, wikipedia, vimeo, etc. The issue is if the user decides to go to https://www.youtube.com, when the user taps a thumbnail to play it, it doesn't autoplay because I don't have the videoId (eg. "https://youtu.be/MpvshzR6tNk" + "&autoplay=1"), I just have the youtube website url
For example:
func loadRequest() {
let strThatUserEntered = "https://youtube.com"
let urlStr = "strThatUserEntered"
guard let url = URL(string: urlStr), let request = URLRequest(url: url) else { return }
wkWebView.load(request)
wkWebView.allowsBackForwardNavigationGestures = true
}
Now when the user selects a random thumbnail, the video loads, the youtube play button appears, and when it's pressed, I get An error occurred, please try again later (this video definitely works)
How can I enable autoplay on any selected youtube thumbnail, if I don't have the videoID?
code:
override func viewDidLoad()
super.viewDidLoad()
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webConfiguration.mediaTypesRequiringUserActionForPlayback = []
wkWebView = WKWebView(frame: .zero, configuration: webConfiguration)
wkWebView.navigationDelegate = self
wkWebView.uiDelegate = self
// pin wkWebView anchors to screen
loadRequest()
}
Related
I create an iOS app that make use of Vimeo for playing videos. I was wondering what the best method is to show Vimeo videos within iOS Swift.
I have fixed that, when an image is clicked, the placeholder image will be hidden, but the video won't play directly. Beside that all Vimeo Interface elements are visible. I know you should have to give credits to Vimeo, so it goes without saying that I display an Vimeo logo at the bottom of the video. Is there a possibility to hide all Vimeo elements of the web player?
Sources where I can find more information would be nice.
If there are any questions left, let me know!
Thanks in advance.
You can use this Swift library HCVimeoVideoExtractor to extract the mp4 video URL then use AVPlayer to play it. Simply pass the Vimeo video link or video id.
let url = URL(string: "https://vimeo.com/254597739")!
HCVimeoVideoExtractor.fetchVideoURLFrom(url: url, completion: { ( video:HCVimeoVideo?, error:Error?) -> Void in
if let err = error {
print("Error = \(err.localizedDescription)")
return
}
guard let vid = video else {
print("Invalid video object")
return
}
print("Title = \(vid.title), url = \(vid.videoURL), thumbnail = \(vid.thumbnailURL)")
if let videoURL = vid.videoURL[.Quality540p] {
let player = AVPlayer(url: videoURL)
let playerController = AVPlayerViewController()
playerController.player = player
self.present(playerController, animated: true) {
player.play()
}
}
})
The best way that I've been able to figure out is to use a WKWebView or UIWebView. Steps:
Add a WKWebView of desired size inside the View Controller.
Get the video embed code from the original Vimeo video (Click on the "Share" button below the video to find the embed code.)
Click on "More Options" on the Vimeo Share sheet that pops-up to configure the look of the embed video.
Use the following code sample to embed the video:
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
self.view.addSubview(webView)
let embedHTML="<html><head><style type=\"text/css\">body {background-color: transparent;color: black;}</style><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"/></head><body style=\"margin:0\"><div><iframe src=\"//player.vimeo.com/video/139785390?autoplay=1&title=1&byline=1&portrait=0\" width=\"640\" height=\"360\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body></html>"
let url = URL(string: "https://")!
webView.loadHTMLString(embedHTML as String, baseURL:url )
webView.contentMode = UIViewContentMode.scaleAspectFit
The way that I've managed to implement this is using AVKit and AVFoundation:
let url: URL! = URL(string: "https://01-lvl3-pdl.vimeocdn.com/01/3355/3/91775232/243724947.mp4?expires=1498547278&token=073f7b03877a8ed3c8029")
let player: AVPlayer = AVPlayer(url: url)
let controller: AVPlayerViewController = AVPlayerViewController()
controller.view.translatesAutoresizingMaskIntoConstraints = false
controller.player = player
// Add `controller` to your view somehow
player.play()
The trick being that you cannot use the link where it displays the website (in my case https://vimeo.com/91775232).
I had to inspect the source and find the actual URL for the video (i.e.: https://01-lvl3-pdl.vimeocdn.com/01/3355/3/91775232/243724947.mp4?expires=1498547278&token=073f7b03877a8ed3c8029).
Once I used that, everything worked fine.
For Swift 4, I have used WKWebView in storyboard and implemented following code:
import WebKit
#IBOutlet weak var webKitView: WKWebView!
To play video in WebView :
if yourVimeoLink.lowercased().contains("vimeo.com") {
let url: NSURL = NSURL(string: yourVimeoLink)
webKitView.contentMode = UIViewContentMode.scaleAspectFit
webKitView.load(URLRequest(url: url as URL))
}
Hope will help! :)
import AVFoundation
import AVKit
let videoURL = "https://vimeo.com/blablabla/whatevertheURLis"
func playExternalVideo() {
let videoURL = NSURL(string: self.videoURL)
let player = AVPlayer(url: videoURL as! URL)
let playerViewController = AVPlayerView()
playerViewController.player = player
}
Make sure to add the AVKit Player View and give it a class of AVPlayerView. As for the Vimeo deal, it should play without Vimeo's UI Controls. For more help watch this video. https://www.youtube.com/watch?v=fhD7hXrpExE
I am downloading files from server and showing in my ios device. File type can be any thing like image, pdf etc. and all loading up fine. Now the problem is, some part of file or image is hiding behind the title of page. I want to add margin at top of file after it loads up.
Code I have written to show file:
func openFile(file:String) {
let myBlog = file
let url = NSURL(string: myBlog)
let request = NSURLRequest(url: url! as URL)
webView.load(request as URLRequest)
self.view.addSubview(webView)
let pdfVC = UIViewController()
pdfVC.view.addSubview(webView)
pdfVC.title = "File"
self.navigationController?.pushViewController(pdfVC, animated: true)
self.navigationController!.navigationBar.tintColor = colors.whiteColor
}
I have created webView property within Class like:
var webView : WKWebView!
And inside viewDidLoad(), I have written:
webView = WKWebView(frame: self.view.frame)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.isUserInteractionEnabled = true
webView.navigationDelegate = self
Result I am getting:
Here some part of image is behind the title. I have tried verious solutions given in link add margins in swift, but nothing is working.
My suggestion is to create instance of WKWebView in controller where you need to display it, in your case instance pdfVC
There is can be model, for example:
enum FileType {
case image(fileURL: URL)
case pdf(fileURL: URL)
}
Creating incase of FileViewController and assign fileType to it
func openFile(file:String) {
let pdfViewController = FileViewController()
pdfVC.fileType = FileType.pdf(fileURL: URL(string: "https://www.google.com")!) // example
pdfVC.title = "File"
navigationController?.pushViewController(pdfVC, animated: true)
}
And inside your VC where you need to display a file:
In this way, even if you do have navigationBar you won't have problem with navigationBar and topMargin
class FileViewController: UIViewController {
var fileType: FileType!
override func viewDidLoad() {
super.viewDidLoad()
var urlRequest: URLRequest!
switch fileType {
case .image(let url), .pdf(let url):
urlRequest = URLRequest(url: url)
#unknown default:
break
}
let webView = WKWebView(frame: view.frame)
webView.load(urlRequest)
self.view = webView
}
}
Hope this will help you!
use Bounds instead of Frame
webView = WKWebView(frame: self.view.Bounds)
I have a simple WKWebView controller in my application that loads a local HTML file. HTML file including following code...
<audio autoplay="true" controls>
<source src="./audio/sound.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Everything works fine, but when the user scrolls the webview, the sound stops, when the scrolling ends, the playback continues.
override func viewDidLoad() {
super.viewDidLoad()
let htmlPath = Bundle.main.path(forResource: "main", ofType: "htm", inDirectory: "level")
let url = URL(fileURLWithPath: htmlPath!)
let request = URLRequest(url: url)
webView.load(request)
}
Trying load remote file, but problem is same:
override func viewDidLoad() {
super.viewDidLoad()
let url = URL(string: "https://www.computerhope.com/jargon/h/html-audio-tag.htm")!
let request = URLRequest(url: url)
webView.load(request)
}
iOS version: 12.1
override func viewDidLoad() {
super.viewDidLoad()
let url = URL(string: "https://www.computerhope.com/jargon/h/html-audio-tag.htm")!
myWebKit.load(URLRequest(url: url))
myWebKit.allowsBackForwardNavigationGestures = true
// Do any additional setup after loading the view.
}
I tried this code.. its working fine for me.. audio is still playing while scrolling the page
myWebKit.allowsBackForwardNavigationGestures = true
try this
I am using WKWebView in swift4 Xcode 10. I am loading a site and user is supposed to logged in which will take him to next page which is a dashboard.
The url is perfectly working in Safari. User can easily logged in but when I load the url in WKWebView and hit Login Button it stucks there and nothing happens. So far I have no idea what's going wrong as the same site is working fine in Safari App so I expect it to work in WKWebView as well
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
let url = URL.init(string: ".com/app/#/login")
let request = URLRequest.init(url: url!)
webView.load(request)
I create an iOS app that make use of Vimeo for playing videos. I was wondering what the best method is to show Vimeo videos within iOS Swift.
I have fixed that, when an image is clicked, the placeholder image will be hidden, but the video won't play directly. Beside that all Vimeo Interface elements are visible. I know you should have to give credits to Vimeo, so it goes without saying that I display an Vimeo logo at the bottom of the video. Is there a possibility to hide all Vimeo elements of the web player?
Sources where I can find more information would be nice.
If there are any questions left, let me know!
Thanks in advance.
You can use this Swift library HCVimeoVideoExtractor to extract the mp4 video URL then use AVPlayer to play it. Simply pass the Vimeo video link or video id.
let url = URL(string: "https://vimeo.com/254597739")!
HCVimeoVideoExtractor.fetchVideoURLFrom(url: url, completion: { ( video:HCVimeoVideo?, error:Error?) -> Void in
if let err = error {
print("Error = \(err.localizedDescription)")
return
}
guard let vid = video else {
print("Invalid video object")
return
}
print("Title = \(vid.title), url = \(vid.videoURL), thumbnail = \(vid.thumbnailURL)")
if let videoURL = vid.videoURL[.Quality540p] {
let player = AVPlayer(url: videoURL)
let playerController = AVPlayerViewController()
playerController.player = player
self.present(playerController, animated: true) {
player.play()
}
}
})
The best way that I've been able to figure out is to use a WKWebView or UIWebView. Steps:
Add a WKWebView of desired size inside the View Controller.
Get the video embed code from the original Vimeo video (Click on the "Share" button below the video to find the embed code.)
Click on "More Options" on the Vimeo Share sheet that pops-up to configure the look of the embed video.
Use the following code sample to embed the video:
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
self.view.addSubview(webView)
let embedHTML="<html><head><style type=\"text/css\">body {background-color: transparent;color: black;}</style><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"/></head><body style=\"margin:0\"><div><iframe src=\"//player.vimeo.com/video/139785390?autoplay=1&title=1&byline=1&portrait=0\" width=\"640\" height=\"360\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body></html>"
let url = URL(string: "https://")!
webView.loadHTMLString(embedHTML as String, baseURL:url )
webView.contentMode = UIViewContentMode.scaleAspectFit
The way that I've managed to implement this is using AVKit and AVFoundation:
let url: URL! = URL(string: "https://01-lvl3-pdl.vimeocdn.com/01/3355/3/91775232/243724947.mp4?expires=1498547278&token=073f7b03877a8ed3c8029")
let player: AVPlayer = AVPlayer(url: url)
let controller: AVPlayerViewController = AVPlayerViewController()
controller.view.translatesAutoresizingMaskIntoConstraints = false
controller.player = player
// Add `controller` to your view somehow
player.play()
The trick being that you cannot use the link where it displays the website (in my case https://vimeo.com/91775232).
I had to inspect the source and find the actual URL for the video (i.e.: https://01-lvl3-pdl.vimeocdn.com/01/3355/3/91775232/243724947.mp4?expires=1498547278&token=073f7b03877a8ed3c8029).
Once I used that, everything worked fine.
For Swift 4, I have used WKWebView in storyboard and implemented following code:
import WebKit
#IBOutlet weak var webKitView: WKWebView!
To play video in WebView :
if yourVimeoLink.lowercased().contains("vimeo.com") {
let url: NSURL = NSURL(string: yourVimeoLink)
webKitView.contentMode = UIViewContentMode.scaleAspectFit
webKitView.load(URLRequest(url: url as URL))
}
Hope will help! :)
import AVFoundation
import AVKit
let videoURL = "https://vimeo.com/blablabla/whatevertheURLis"
func playExternalVideo() {
let videoURL = NSURL(string: self.videoURL)
let player = AVPlayer(url: videoURL as! URL)
let playerViewController = AVPlayerView()
playerViewController.player = player
}
Make sure to add the AVKit Player View and give it a class of AVPlayerView. As for the Vimeo deal, it should play without Vimeo's UI Controls. For more help watch this video. https://www.youtube.com/watch?v=fhD7hXrpExE