SoFunction
Updated on 2025-04-11

Implementation method of WKWebview non-full screen automatic playback of h5 videos (Swift, OC)

Preface

When WKWebview loads an h5 page for video playback, the default is that the user needs to click to play the video, and the video will be played in full screen when playing. What should I do if I want to play non-full-screen videos on h5 pages?

Swift implementation

At this time, you need to set the configuration parameters of WKWebview. Let’s first look at the implementation of Swift. The code is as follows:

let configuration = WKWebViewConfiguration()
 = true
if #available(iOS 10.0, *) {
     = .all
} else if #available(iOS 9.0, *){
     = false
}else{
     = false
}
h5WebView = WKWebView(frame: CGRect(x: 0, y: 0, width: , height: , configuration: configuration)

Non-full-screen playback is relatively simple, just set the allowsInlineMediaPlayback property of configuration to true. Of course, the h5 side also supports non-full-screen playback, otherwise the client setting this property has no effect. Let’s talk about h5 non-full screen settings last and separately.

To achieve automatic video playback, the configuration's mediaPlaybackRequiresUserAction property needs to be set to false in iOS 8.0, but this property has been deprecated since iOS 9.0. Change it to requireUserActionForMediaPlayback, so iOS9.0 needs to set requiresUserActionForMediaPlayback to false to achieve automatic playback of H5 videos. However, this property was discarded after 10.0. System API description:

extension WKWebViewConfiguration {
//ios 9.0 is abandoned    @available(iOS, introduced: 8.0, deprecated: 9.0)
    open var mediaPlaybackRequiresUserAction: Bool
//ios 10.0 is scrapped    @available(iOS, introduced: 9.0, deprecated: 10.0)
    open var requiresUserActionForMediaPlayback: Bool
}

In iOS 10.0 and later system versions, Apple introduced the mediaTypesRequiredUserActionForPlayback property. In Swift, this property is a WKAudiovisualMediaTypes structure. This structure provides us with three static values, namely audio, video, and all. Audio means automatic playback of audio, video means automatic playback of video, and all means automatic playback of audio and video. The system code of WKAudiovisualMediaTypes structure is as follows:

@available(iOS 10.0, *)
public struct WKAudiovisualMediaTypes : OptionSet {

    public init(rawValue: UInt)

    public static var audio: WKAudiovisualMediaTypes { get }

    public static var video: WKAudiovisualMediaTypes { get }

    public static var all: WKAudiovisualMediaTypes { get }
}

OC implementation

After talking about Swift, let’s talk about objective-c.

The parameters of oc and Swift are not much different. iOS 8.0 requires setting the mediaPlaybackRequiresUserAction property of configuration, and iOS 9.0 requires setting the required UserActionForMediaPlayback property of configuration.

iOS 10.0 will be the same as swift after the release of iOS. You need to set the mediaTypesRequiredUserActionForPlayback property. The above three attribute names are exactly the same as those in Swift.

But unlike swift, in objective-c, the property of mediaTypesRequireUserActionForPlayback is an enum. And one more value than in Swift, as follows:

typedef NS_OPTIONS(NSUInteger, WKAudiovisualMediaTypes) {
    WKAudiovisualMediaTypeNone = 0,
    WKAudiovisualMediaTypeAudio = 1 << 0,
    WKAudiovisualMediaTypeVideo = 1 << 1,
    WKAudiovisualMediaTypeAll = NSUIntegerMax
} API_AVAILABLE(macos(10.12), ios(10.0));

In this enumeration, the three enumeration values ​​of WKAudiovisualMediaTypeAudio, WKAudiovisualMediaTypeVideo, and WKAudiovisualMediaTypeAll correspond to audio, video, and all in swift respectively. And it is exactly the same as the functions in Swift. It's just that this enumeration has one more value than the WKAudiovisualMediaTypes structure in Swift: WKAudiovisualMediaTypeNone. If the value of mediaTypesRequiredUserActionForPlayback is set to WKAudiovisualMediaTypeNone in oc, it means that in h5, the user needs to click on it to play.

The non-full-screen automatic playback code is set in OC as follows:

WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
//Set non-full screen playback = YES;
//The adaptation of different system versions can be determined by yourself = WKAudiovisualMediaTypeAll;
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, , ) configuration:configuration];

H5 non-full screen playback

If you want to support non-full-screen playback in WKWebView on the App side, you must make corresponding settings on both the h5 and the app side. Above we talked about the method of non-full-screen playback on the App side, and finally let’s talk about how to set it up on the h5 side.

In h5, non-full screen playback is called inline playback. If you want to support inline playback, you need to set the playsinline property to true in the video tag. However, playsinline only supports iOS version 10 or above. Previous versions of iOS 10 need to set the webkit-playsinline attribute. Code:

<video playsinline="true" webkit-playsinline="true" controls="controls">
    <source src="http://xxx.mp4" type="video/mp4">
  </video>

Summarize

This is the article about WKWebview’s non-full-screen automatic playback of h5 videos. For more related content about WKWebview’s automatic playback of h5 videos, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!