美文网首页
iOS WKWebView 加载三方网站,获取网站内视频URL

iOS WKWebView 加载三方网站,获取网站内视频URL

作者: 伊路顺峰 | 来源:发表于2024-05-07 14:28 被阅读0次

最近有这样一个需求:App内WebView,加载三方视频网站时,播放视频资源时需要跳转iOS 原生播放器,Android同事已经实现了此功能,问了一下Android同事,在WebView加载网站资源时,Android内有一个方法: shouldInterceptRequest 可以过滤页面中所有的js、css、图片、视频资源,在此方法内部判断如果是mp4 获取其他格式的视频,就把此视频资源保存一下,等用户点击页面其他内容想要播放时,把视频URL传过去调起自己的原生播放器,但是啊,但是iOS没有类似Android shouldInterceptRequest 可以过滤页面所有内容的方法,花了两天时间最终换了一种方式获取到了视频URL
通过像页面中注入js 事件的方式,找到video 标签,然后拿到video 的src 字符串,并将该字符串传递到iOS原生端关键代码如下:

    override func viewDidLoad() {

//注入的js 代码
let h5GetVideoSrc = ";var videos=document.getElementsByTagName('video');function pauseVideo(){var len=videos.length;for(var i=0;i<len;i++){videos[i].pause()}}var audios=document.getElementsByTagName('audio');function pauseAudio(){var len=audios.length;for(var i=0;i<len;i++){audios[i].pause()}}function jsGetVideoSrc(){if(videos.length){for(var i=0;i<videos.length;i++){var v=videos[i];var _src=v.src;if((_src.startsWith('http')||_src.startsWith('https'))&&(_src.indexOf('.mp4')>-1||_src.indexOf('.m3u8?')>-1||url.indexOf('.avi')>-1||_src.indexOf('.mov')>-1||_src.indexOf('.mkv')>-1||_src.indexOf('.flv')>-1||_src.indexOf('.rmvb')>-1)){v.onplay=function(){var getVideoSrc=window.webkit.messageHandlers.getVideoSrc;if(getVideoSrc){getVideoSrc.postMessage(_src)}};break}}}};"
//以上这段js 代码的的意思是通过`document.getElementsByTagName('video')`获取页面中所有的video 元素,遍历符合条件的video,然后给这个video 的播放事件添加一个回调,回调函数就调用到了iOS原生事件`userContentController `;另外还有 `pauseVideo` 和 `pauseAudio` 两个函数是在获取到视频URL后跳转页面时将H5 页面中的视频暂停
let getJsVideoSrc : WKUserScript = .init(source: h5GetVideoSrc, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

        let getJsVideoSrc : WKUserScript = .init(source: h5GetVideoSrc, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

        let userContentController = WKUserContentController()
        userContentController.add(self, name: "getVideoSrc")
        userContentController.addUserScript(getJsVideoSrc)
        let config = WKWebViewConfiguration()
        config.userContentController = userContentController
        webView = WKWebView.init(frame: CGRect(x: 0, y: navHeight, width: mainScreenW, height: mainScreenH - navHeight), configuration: config)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        view.addSubview(webView)

if let _url = URL(string: "你的网址") {
                let urlRequest = URLRequest(url: _url)
                webView.load(urlRequest)
            }

//监听URL变化,在URL 变化后调用注入的js 方法
        webView.addObserver(self, forKeyPath: "URL", options: .new, context: nil)
}


//监听URL变化回调函数
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if (keyPath == "URL") {
            //延迟0.1 秒后执行获取video 的js 方法
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
                self.webView.evaluateJavaScript("jsGetVideoSrc()", completionHandler: nil)
            })
        }
    }

//js 调用iOS原生函数
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if (message.name == "getVideoSrc") {
            let videoSrc = message.body as? String
            //暂停正在播放的H5 视频
            webView.evaluateJavaScript("pauseVideo()", completionHandler: nil)
          webView.evaluateJavaScript("pauseAudio()", completionHandler: nil)
            //跳转页面。。。
        }
    }

相关文章

网友评论

      本文标题:iOS WKWebView 加载三方网站,获取网站内视频URL

      本文链接:https://www.haomeiwen.com/subject/lynrfjtx.html