I figured out how to display normal YouTube videos and shorts along with any video on the internet in my app. I would like these videos to auto play when they appear and I can't figure out how.
I tried the following code below, it loads the video when it appears but the video never plays. I have 2 different structs to display YouTube videos and plain only online videos. I've only tried to modify the WebVideoView struct to auto play the video. But I'm assuming whatever I have to do for one can also be done for the other.
import SwiftUI
import WebKit
struct YouTubeView: UIViewRepresentable {
let link: String
let short: Bool
@Environment(\.colorScheme) var colorScheme
func makeUIView(context: Context) -> WKWebView {
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
return WKWebView(frame: .zero, configuration: webConfiguration)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
var embedHTML = ""
if short {
let realLink = link.dropFirst(7)
embedHTML = """
<body style="background-color:\(colorScheme == .dark ? "black" : "white"); display: flex; justify-content: center; align-items: center;">
<iframe
width="500"
height="950"
src="https://www.youtube.com/embed/\(realLink)?autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
"""
} else {
embedHTML = """
<body style="background-color:\(colorScheme == .dark ? "black" : "white");">
<iframe
width=450"
height="280"
src="https://www.youtube.com/embed/\(link)?autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
"""
}
uiView.scrollView.isScrollEnabled = false
uiView.loadHTMLString(embedHTML, baseURL: nil)
}
}
struct WebVideoView: UIViewRepresentable {
let link: String
@Environment(\.colorScheme) var colorScheme
func makeUIView(context: Context) -> WKWebView {
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
return WKWebView(frame: .zero, configuration: webConfiguration)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let html = """
<body style="background-color:\(colorScheme == .dark ? "black" : "white");display: flex; justify-content: center;">
<video
src="\(link)"
width="950" height="536"
controls
playsinline="true"
autoplay>
</body>
"""
let script = """
var video = document.querySelector('video');
video.addEventListener('loadedmetadata', function() {
video.play();
});
"""
let userScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
let userContentController = WKUserContentController()
userContentController.addUserScript(userScript)
let webConfiguration = WKWebViewConfiguration()
webConfiguration.userContentController = userContentController
webConfiguration.allowsInlineMediaPlayback = true
uiView.scrollView.isScrollEnabled = false
uiView.loadHTMLString(html, baseURL: nil)
uiView.configuration.allowsInlineMediaPlayback = true
uiView.configuration.userContentController = userContentController
}
}
