iOS中使用WKWebView播放视频时如何获取流媒体URL？

下面是几种可行的实现方式，可根据网站视频加载逻辑选择：

1. 拦截网络请求提取视频URL #

利用WKWebView的导航代理拦截所有网络请求，筛选出视频资源请求并提取URL：

• 实现WKNavigationDelegate的webView(_:decidePolicyFor:decisionHandler:)方法，通过MIMEType判断是否为视频资源：

  func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
      if let mimeType = navigationAction.response?.mimeType, 
         (mimeType.starts(with: "video/") || mimeType == "application/vnd.apple.mpegurl") {
          if let videoUrl = navigationAction.request.url?.absoluteString {
              // 保存URL或传递给AVPlayer使用
              print("获取到视频流URL：\(videoUrl)")
          }
      }
      decisionHandler(.allow)
  }
  

• 补充：针对动态加载的视频资源，可结合WKURLSchemeHandler（iOS 11+）做全局拦截，需自定义Scheme转发逻辑。

2. 注入JavaScript获取视频元素源地址 #

直接从网页的<video>元素中提取真实流地址，通过JS与原生代码通信传递URL：

• 第一步：配置WKWebView的消息处理器，接收JS传递的数据：

  let contentController = WKUserContentController()
  contentController.add(self, name: "videoUrlHandler")
  let config = WKWebViewConfiguration()
  config.userContentController = contentController
  let webView = WKWebView(frame: view.bounds, configuration: config)
  

• 第二步：实现WKScriptMessageHandler协议接收消息：

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      guard message.name == "videoUrlHandler", 
            let body = message.body as? [String: Any], 
            let videoUrl = body["url"] as? String else { return }
      // 保存或使用该URL
      print("JS传递的视频URL：\(videoUrl)")
  }
  

• 第三步：网页加载完成后注入JS脚本，监听视频播放事件：

  webView.evaluateJavaScript("""
      // 监听现有video元素的播放事件
      document.querySelectorAll('video').forEach(video => {
          video.addEventListener('play', function() {
              const realUrl = this.currentSrc || this.src;
              realUrl && window.webkit.messageHandlers.videoUrlHandler.postMessage({url: realUrl});
          });
      });
      // 监听动态添加的video元素
      const observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
              mutation.addedNodes.forEach(node => {
                  if (node.tagName === 'VIDEO') {
                      node.addEventListener('play', function() {
                          const realUrl = this.currentSrc || this.src;
                          realUrl && window.webkit.messageHandlers.videoUrlHandler.postMessage({url: realUrl});
                      });
                  }
              });
          });
      });
      observer.observe(document.body, {childList: true, subtree: true});
  """, completionHandler: nil)
  

关键注意事项 #

• 请求头校验：部分网站的视频流会验证Referer、Cookie等请求头，直接用AVPlayer播放可能失败，需在AVURLAsset的资源加载代理中添加对应请求头。
• DRM保护：若视频采用FairPlay等DRM加密，即使获取到URL，AVPlayer也需对应许可证才能播放，这种场景无法直接播放。
• 自动播放设置：确保WKWebView允许自动播放，否则视频播放事件可能无法触发：

  config.mediaTypesRequiringUserActionForPlayback = []
  

内容的提问来源于stack exchange，提问作者Nguyen Cong Hieu