如何使用 WkWebView 内联播放视频答案

【问题标题】：How to play video inline with WkWebView如何使用 WkWebView 内联播放视频
【发布时间】：2017-10-08 16:51:43
【问题描述】：

当您使用 iphone 并在 web 视图中播放视频时，此视频会在本机播放器中全屏打开。

我们已经尝试将“allowsInlineMediaPlayback”属性设置为 true 的 UIWebView 和 WKWebView。但网页内容中的视频使用 iphone iOS 10.2 全屏启动。你知道我能做什么吗？

let webConfiguration = WKWebViewConfiguration()
// Fix Fullscreen mode for video and autoplay
webConfiguration.preferences.javaScriptEnabled = true
webConfiguration.mediaPlaybackRequiresUserAction = false
webConfiguration.allowsInlineMediaPlayback = true

webView = WKWebView(frame: CGRect(x: 0, y: 0, width:self.backgroundView.frame.width, height:self.backgroundView.frame.height), configuration: webConfiguration)

环境：Xcode 8，快速 3

【问题讨论】：

嗨。你得到答案了吗？

标签： iphone swift video wkwebview

【解决方案1】：

你的代码没有问题，但是你需要多一步，你使用的视频URL应该总是带有参数playsinline=1。

//step1
if let videoURL:URL = URL(string: "https://somevideo.mp4?playsinline=1")
//step2
webConfiguration.allowsInlineMediaPlayback = true

那么你就可以做剩下的事情了。

【讨论】：

step1 也可以通过设置网络视频的脚本来完成
别忘了你可能需要 mediaTypesRequiringUserActionForPlayback = []

【解决方案2】：

这是您想要的解决方案，我以编程方式制作播放器并更改一些代码，以内联播放视频。

var myPlayer: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsInlineMediaPlayback = true
        webConfiguration.mediaTypesRequiringUserActionForPlayback = []

        myPlayer = WKWebView(frame: CGRect(x: 0, y: 0, width: 375, height: 300), configuration: webConfiguration)
        self.view.addSubview(myPlayer)

        if let videoURL:URL = URL(string: "https://www.youtube.com/embed/9n1e1N0Sa9k?playsinline=1") {
             let request:URLRequest = URLRequest(url: videoURL)
             myPlayer.load(request)
        }

        //OR to show player control also, use this
        /*if let videoURL:URL = URL(string: "https://www.youtube.com/embed/9n1e1N0Sa9k?playsinline=1&controls:1") {
             let request:URLRequest = URLRequest(url: videoURL)
             myPlayer.load(request)
        }*/
    }

【讨论】：

请注意，如果您的 WKWebView 是通过情节提要初始化的，则必须检查该元素的属性检查器中的“内联播放”框，而不是以编程方式传入 WKWebViewConfiguration。
@Hardik 如何在媒体播放或暂停时收到通知？
你需要在 WKWebView 中播放视频吗？或者您正在寻找 youtube 播放器？

【解决方案3】：

我最终这样做了：

func load(url: String) {
    let html = "<video playsinline controls width=\"100%\" src=\"\(url)\"> </video>"
    self.webView.loadHTMLString(html, baseURL: nil)
}

将网页视图加载为 HTML 并添加一些视频标签以自定义用户体验。

【讨论】：

这对我来说也确实有效。但我确实包括：<body style="margin: 0px; background-color: black;"> <video ...> ...</head> </body>

【解决方案4】：

这对我有用：

let configuration = WKWebViewConfiguration()
if #available(iOS 10.0, *) {
   configuration.mediaTypesRequiringUserActionForPlayback = []
}
configuration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: frame, configuration: configuration)

【讨论】：

【解决方案5】：

这是不需要 HTML 字符串的最佳方法。还添加了一个托管在 archive.org 上的测试视频，这样您就可以避免大钱兔子测试视频恐怖秀：

斯威夫特 4：

if let mediaURL:URL = URL(string: "https://ia800307.us.archive.org/14/items/electricsheep-flock-244-32500-9/00244%3D32649%3D22645%3D23652_512kb.mp4") {
    let request:URLRequest = URLRequest(url: mediaURL);
    self.webView.load(request)
}

对象-C：

NSURL *mediaURL = [NSURL URLWithString:@"https://ia800307.us.archive.org/14/items/electricsheep-flock-244-32500-9/00244%3D32649%3D22645%3D23652_512kb.mp4"];

NSURLRequest *request = [NSURLRequest requestWithURL:mediaURL]
[self.webView loadRequest:request];

【讨论】：