WKWebView自动播放非全屏视频的妙招，Swift轻松实现！

2023-11-18 07:13:35

在 WKWebView 中非全屏自动播放视频：让视频观看体验更上一层楼

简介

在现代 Web 开发中，视频已成为提升用户体验的关键元素。当您在 WKWebView 中加载 HTML5 视频页面时，您希望视频能够自动播放，并以非全屏模式顺畅播放。本文将深入探讨如何在 WKWebView 中实现这一目标，让您的网站或应用程序更具吸引力。

WKWebView 的默认设置

默认情况下，WKWebView 会阻止视频自动播放。这是出于安全考虑，以防止未经用户许可播放不需要的媒体内容。为了启用自动播放，我们需要调整 WKWebView 的特定属性。

启用内联播放和禁用全屏播放

1. 启用内联媒体播放

webView.allowsInlineMediaPlayback = true

通过将此属性设置为 true，我们允许视频在 WKWebView 中内联播放，而不是全屏播放。

2. 禁用全屏播放

webView.configuration.mediaTypesRequiringUserActionForPlayback = []

此属性覆盖了 WKWebView 的默认行为，允许视频在非全屏模式下自动播放。

限制媒体类型

在某些情况下，您可能希望在 WebView 中播放受限媒体，例如受版权保护的视频。为此，您需要在 WKWebView 的配置对象中设置 mediaTypesRequiringUserActionForPlayback 属性。

1. 阻止所有媒体自动播放

webView.configuration.mediaTypesRequiringUserActionForPlayback = [WKAudiovisualMediaType, WKVideoMediaType]

2. 阻止受版权保护的媒体自动播放

webView.configuration.mediaTypesRequiringUserActionForPlayback = [WKAudiovisualMediaTypeProtected, WKVideoMediaTypeProtected]

代码示例

import WebKit

class MyViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建一个 WKWebView
        let webView = WKWebView()
        
        // 启用内联媒体播放
        webView.allowsInlineMediaPlayback = true
        
        // 禁用全屏播放
        webView.configuration.mediaTypesRequiringUserActionForPlayback = []
        
        // 加载视频页面
        let url = URL(string: "https://www.example.com/video.html")
        webView.load(URLRequest(url: url))
        
        // 将 WKWebView 添加到视图
        self.view.addSubview(webView)
    }
}