如何在WkWebView中内联播放视频

Question

如何在WkWebView中内联播放视频

30

当你使用iPhone在webview中播放视频时，该视频会在本地播放器中全屏打开。

我们已经尝试过将"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，Swift 3

- UBLearn

嗨。你有得到这个问题的答案吗？ - Erik Andershed

5个回答

21

以下是您要求的解决方案，我通过编程创建播放器并更改了一些代码以实现内联视频播放。

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)
        }*/
    }

- Hardik Thakkar

7

请注意，如果您的 WKWebView 是通过 storyboard 初始化的，则必须在该元素的属性检查器中勾选“内联播放”框，而不是通过编程方式传递 WKWebViewConfiguration。 - kitschpatrol

当媒体播放或暂停时，我该如何收到通知？ - Ekta Padaliya

你需要在WKWebView中播放视频吗？还是你正在寻找YouTube播放器？ - Hardik Thakkar

8

我最终做了这个：

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

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

- Mantas Laurinavičius

这实际上也是对我有效的方法。但我包括了以下内容： <body style="margin: 0px; background-color: black;"> <video ...> ...</head> </body> - Edudjr

6

这对我有用：

这适用于我：

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

- Atan

1

这里提供了一种无需HTML字符串的最佳方法。此外，还添加了一个托管在archive.org上的测试视频，以避免Big Buck Bunny测试视频的恐怖表现：

Swift 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)
}

Obj-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];

- dcrow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- onewh · Accepted Answer

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

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

然后你可以做剩下的事情。