前言

WKWebview加載一個(gè)視頻播放的h5頁(yè)面時(shí)，默認(rèn)是需要用戶點(diǎn)擊一下才能播放視頻，且視頻播放時(shí)會(huì)全屏播放。如果想要h5頁(yè)面視頻非全屏自動(dòng)播放該怎么做呢？

Swift實(shí)現(xiàn)

這個(gè)時(shí)候就需要設(shè)置WKWebview的configuration參數(shù)，我們先來(lái)看一下Swift的實(shí)現(xiàn)，代碼如下：

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)

非全屏播放比較簡(jiǎn)單，設(shè)置configuration的allowsInlineMediaPlayback 屬性為true就可以了。當(dāng)然h5端同樣也要支持非全屏播放，否則客戶端設(shè)置此屬性沒(méi)有任何作用。關(guān)于h5非全屏設(shè)置我們放最后單獨(dú)說(shuō)。

要想實(shí)現(xiàn)自動(dòng)播放視頻，在iOS8.0需要設(shè)置configuration的mediaPlaybackRequiresUserAction 屬性為false，但是從iOS 9.0開(kāi)始此屬性被廢棄。改為了requiresUserActionForMediaPlayback ，所以iOS9.0 需要設(shè)置requiresUserActionForMediaPlayback 為false，即可實(shí)現(xiàn)H5視頻自動(dòng)播放。但是此屬性在10.0之后又被廢棄了。系統(tǒng)api說(shuō)明：

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及之后系統(tǒng)版本蘋(píng)果又引入了mediaTypesRequiringUserActionForPlayback 屬性。在Swift中，此屬性是一個(gè)WKAudiovisualMediaTypes結(jié)構(gòu)體。此結(jié)構(gòu)體為我們提供了三個(gè)靜態(tài)值，分別為audio、video、all。audio則代表自動(dòng)播放音頻，video代表自動(dòng)播放視頻，all則代表音視頻都可以自動(dòng)播放。WKAudiovisualMediaTypes結(jié)構(gòu)體系統(tǒng)代碼如下：

@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實(shí)現(xiàn)

講完了Swift，我們來(lái)講objective-c。

oc與Swift的參數(shù)區(qū)別不大，iOS 8.0需要設(shè)置configuration的mediaPlaybackRequiresUserAction屬性，iOS 9.0需要設(shè)置configuration的requiresUserActionForMediaPlayback屬性。

iOS 10.0版本以后也是同swift一樣，需要設(shè)置mediaTypesRequiringUserActionForPlayback屬性，以上三個(gè)屬性名字與Swift中完全一樣。

但是與swift不同的是，在objective-c中，mediaTypesRequiringUserActionForPlayback的屬性是一個(gè)枚舉。且比Swift中多一個(gè)值，如下系統(tǒng)代碼：

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三個(gè)枚舉值分別對(duì)應(yīng)swift中的audio、video、all。且與Swift中功能完全一致。只是此枚舉比Swift中的WKAudiovisualMediaTypes結(jié)構(gòu)體多了一個(gè)值：WKAudiovisualMediaTypeNone。在oc中如果mediaTypesRequiringUserActionForPlayback的值設(shè)置為WKAudiovisualMediaTypeNone，則代表在h5中無(wú)論音視頻都需要用戶點(diǎn)擊才能播放。

oc中設(shè)置非全屏自動(dòng)播放代碼如下：

WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
//設(shè)置非全屏播放
configuration.allowsInlineMediaPlayback = YES;
//不同系統(tǒng)版本適配可自行判斷
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端都必須做相應(yīng)的設(shè)置。上面我們講了App端非全屏播放的方法，最后我們來(lái)講一下在h5端怎么設(shè)置。

在h5中非全屏播放被稱之為內(nèi)聯(lián)播放。如果要支持內(nèi)聯(lián)播放，需要在video標(biāo)簽設(shè)置playsinline屬性為true。但是playsinline僅支持iOS 10版本以上的系統(tǒng)。iOS 10以前版本則需要設(shè)置webkit-playsinline屬性。代碼：

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

總結(jié)

到此這篇關(guān)于WKWebview非全屏自動(dòng)播放h5視頻的文章就介紹到這了,更多相關(guān)WKWebview自動(dòng)播放h5視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論