前言

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的allowsInlineMediaPlayback 屬性為true就可以了。當然h5端同樣也要支持非全屏播放，否則客戶端設置此屬性沒有任何作用。關于h5非全屏設置我們放最后單獨說。

要想實現自動播放視頻，在iOS8.0需要設置configuration的mediaPlaybackRequiresUserAction 屬性為false，但是從iOS 9.0開始此屬性被廢棄。改為了requiresUserActionForMediaPlayback ，所以iOS9.0 需要設置requiresUserActionForMediaPlayback 為false，即可實現H5視頻自動播放。但是此屬性在10.0之后又被廢棄了。系統(tǒng)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及之后系統(tǒng)版本蘋果又引入了mediaTypesRequiringUserActionForPlayback 屬性。在Swift中，此屬性是一個WKAudiovisualMediaTypes結構體。此結構體為我們提供了三個靜態(tài)值，分別為audio、video、all。audio則代表自動播放音頻，video代表自動播放視頻，all則代表音視頻都可以自動播放。WKAudiovisualMediaTypes結構體系統(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實現

講完了Swift，我們來講objective-c。

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

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

但是與swift不同的是，在objective-c中，mediaTypesRequiringUserActionForPlayback的屬性是一個枚舉。且比Swift中多一個值，如下系統(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三個枚舉值分別對應swift中的audio、video、all。且與Swift中功能完全一致。只是此枚舉比Swift中的WKAudiovisualMediaTypes結構體多了一個值：WKAudiovisualMediaTypeNone。在oc中如果mediaTypesRequiringUserActionForPlayback的值設置為WKAudiovisualMediaTypeNone，則代表在h5中無論音視頻都需要用戶點擊才能播放。

oc中設置非全屏自動播放代碼如下：

WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
//設置非全屏播放
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端都必須做相應的設置。上面我們講了App端非全屏播放的方法，最后我們來講一下在h5端怎么設置。

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

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

總結

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

最新評論