This article was first published on the public account [an old code farmer]

When WKWebview loads a video playing H5 page, the default is that the user needs to click to play the video, and the video will play in full screen. What should I do if I want the video on the H5 page not to play in full screen?

Swift implementation

This time need to set the WKWebview configuration parameter, let’s first look at the implementation of Swift, the code is as follows:

Let the configuration = WKWebViewConfiguration () configuration. AllowsInlineMediaPlayback = true if # available (iOS 9.0, *){ configuration.requiresUserActionForMediaPlayback = false }else{ configuration.mediaPlaybackRequiresUserAction = false } h5WebView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height, configuration: configuration)Copy the code

The full-screen playback is simpler, set the configuration allowsInlineMediaPlayback attribute to true. Of course, h5 should also support non-full-screen playback, otherwise, setting this attribute on the client has no effect. We’ll talk about the h5’s non-full-screen Settings separately at the end. If you want to automatically play video, in iOS8.0 needs, set up the configuration mediaPlaybackRequiresUserAction attribute to false, but starting from the iOS 9.0 this attribute was abandoned. To requiresUserActionForMediaPlayback, so iOS9.0 need to set up requiresUserActionForMediaPlayback to false, H5 video can be realized automatically. However, this attribute was deprecated after 10.0. System API description:

Extension WKWebViewConfiguration {//ios 9.0 was deprecated @available(ios, Introduced: 8.0, deprecated: 9.0) the open var mediaPlaybackRequiresUserAction: Bool / / ios 10.0 is waste @ the available (ios, introduced: 9.0, deprecated: 10.0) the open var requiresUserActionForMediaPlayback: Bool}Copy the code

In iOS 10.0 and after system version apple introduced mediaTypesRequiringUserActionForPlayback properties. In Swift, this property is a WKAudiovisualMediaTypes structure. This structure provides us with three static values, audio, video, and all. Audio indicates that audio is not automatically played. Video indicates that video is not automatically played. All indicates that audio and video are not automatically played. The WKAudiovisualMediaTypes structure system code 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 } }Copy the code

OC implementation

So with Swift out of the way, let’s talk about Objective-C. Oc and the parameters of the Swift distinction is not big, iOS 8.0 need to set up the configuration of mediaPlaybackRequiresUserAction properties, IOS 9.0 need to set the configuration requiresUserActionForMediaPlayback attributes. IOS version 10.0 is the same as swift later, you need to set up mediaTypesRequiringUserActionForPlayback attribute, the above three attribute name and swift in exactly the same. But unlike swift, in objective – c mediaTypesRequiringUserActionForPlayback attribute is an enumerated. And one more value than Swift, the following system code:

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

In this enumeration, WKAudiovisualMediaTypeAudio, WKAudiovisualMediaTypeVideo, WKAudiovisualMediaTypeAll three enumeration values corresponding to swift of audio, video, and all. And the function is completely consistent with Swift. Just this enumeration than Swift WKAudiovisualMediaTypes structure of a value: WKAudiovisualMediaTypeNone. If the value is set to mediaTypesRequiringUserActionForPlayback in oc WKAudiovisualMediaTypeNone, represents both audio and video will automatically play. The code for setting non-full-screen autoplay in OC is as follows:

WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init]; / / set the full-screen playback configuration. AllowsInlineMediaPlayback = YES; / / different system version can judge for themselves the configuration mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone; _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:configuration];Copy the code

H5 Non-full screen playback

If you want to support non-full-screen playback in WKWebView on the App side, corresponding Settings must be made on both the H5 and App sides. Above we talked about the method of non-full screen playback on the App side, and finally we will talk about how to set up on the H5 side. Full screen playback on h5 is called inline playback. To support inline playback, set the playsinLine property to true on the video TAB. But Playsinline only supports iOS 10 or later. Previous versions of iOS 10 required the WebKit-Playsinline property to be set. Code:

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

Pay attention to the public number [an old code farmers] free access to iOS advanced learning video

Non-full-screen automatic playback of H5 video