WKWebview 비전면 자동 재생 h5 비디오 구현 방법(Swift, OC)

앞말

WKWebview에서 비디오가 재생되는 h5 페이지를 불러올 때 기본적으로 사용자가 클릭해야 비디오를 재생할 수 있고 비디오가 재생될 때 전체 화면으로 재생됩니다.h5 페이지 영상이 전체 화면이 아닌 자동으로 재생되려면 어떻게 해야 하나요?

Swift 구현

이때 WKWebview의 configuration 매개 변수를 설정해야 합니다. 먼저 Swift의 구현을 살펴보겠습니다. 코드는 다음과 같습니다.

let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
if #available(iOS 10.0, *) {
    configuration.mediaTypesRequiringUserActionForPlayback = .all
} else 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)

전체 화면이 아닌 재생은 비교적 간단합니다. configuration의 allows Inline MediaPlayback 속성을true로 설정하면 됩니다.물론 h5단 역시 비전면 재생을 지원해야 합니다. 그렇지 않으면 클라이언트가 이 속성을 설정하는 데 아무런 작용이 없습니다.h5 비전면 설정에 관해서는 마지막으로 따로 말씀드리겠습니다.
자동으로 동영상을 재생하려면 iOS8.0에서configuration을 설정해야 하는 미디어플레이백RequiresUserAction 속성은false이지만 iOS9.0부터 이 속성은 폐기됩니다.requiresUserActionForMediaPlayback으로 변경하기 때문에 iOS9.0은 requiresUserActionForMediaPlayback을false로 설정하면 H5 동영상이 자동으로 재생됩니다.그러나 이 속성은 10.0 이후 폐기되었습니다.시스템api 설명:

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

iOS 10.0 및 이후 시스템 버전에서 애플은 미디어 types Requiring User Action ForPlayback 속성을 도입했다.Swift에서 이 속성은 WKAudiovisualMediaTypes 구조체입니다.이 구조체는 우리에게 오디오, 비디오, all 등 세 가지 정적 값을 제공했다.오디오는 오디오를 자동으로 재생하고, 비디오는 영상을 자동으로 재생하며, all는 음성 영상을 모두 자동으로 재생할 수 있다.WKAudiovisualMediaTypes 아키텍처 시스템 코드는 다음과 같습니다.

@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 구현

Swift 얘기 끝났습니다. Objective-c를 말씀드리겠습니다.
oc와 Swift의 매개 변수는 차이가 크지 않습니다. iOS 8.0은configuration의mediaPlaybackRequiresUserAction 속성을 설정해야 하고, iOS 9.0은configuration의requiresUserActionForMediaPlayback 속성을 설정해야 합니다.
iOS 10.0 버전 이후에도 swift와 마찬가지로 미디어 Types Requiring User Action ForPlayback 속성을 설정해야 합니다. 상기 세 가지 속성 이름은 Swift와 같습니다.
그러나 swift와 달리 Objective-c에서 미디어 types Requiring User Action ForPlayback의 속성은 매거진입니다.다음 시스템 코드와 같이 Swift보다 값이 하나 더 많습니다.

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

이 매거에서 WKAudiovisualMediaTypeAudio, WKAudiovisualMediaTypeVideo, WKAudiovisualMediaTypeAll 세 개의 매거값은 각각 swift의audio,video,all에 대응한다.Swift의 기능과 완벽하게 일치합니다.다만 이 매거는 Swift의 WKAudiovisualMediaTypes 구조체보다 값이 하나 더 많습니다: WKAudiovisualMediaTypeNone.oc에서mediaTypesRequiringUserActionForPlayback의 값이 WKAudiovisualMediaTypeNone로 설정되면 h5에서 음성과 동영상을 모두 사용자가 클릭해야 재생할 수 있음을 나타냅니다.
oc에서 전체 화면이 아닌 자동 재생 코드를 다음과 같이 설정합니다.

WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
// 
configuration.allowsInlineMediaPlayback = YES;
// 
configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeAll;
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:configuration];

H5 전체 화면 재생 안 함

App 측의 WKWebView에서 전체 화면이 아닌 재생을 지원하려면 h5 측과 app 측이 상응하는 설정을 해야 합니다.위에서 우리는 앱의 전체 화면이 아닌 재생 방법을 이야기했고 마지막으로 h5단에서 어떻게 설정하는지 이야기했다.
h5에서 전체 화면이 아닌 재생을 내연 재생이라고 부른다.내연 재생을 지원하려면 비디오 탭에서playsinline 속성을true로 설정해야 합니다.그러나playsinline은 iOS 10 버전 이상의 시스템만 지원합니다.iOS 10 이전 버전은 웹kit-playsinline 속성을 설정해야 합니다.코드:

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

총결산

WKWebview 비전면 자동 재생 h5 동영상에 대한 이 글은 여기까지 소개되었습니다. 더 많은 관련 WKWebview 자동 재생 h5 동영상 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 조회해 주십시오. 앞으로 많은 응원 부탁드립니다!