本文首發(fā)于公眾號(hào)【一個(gè)老碼農(nóng)】
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 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è)置此屬性沒有任何作用。關(guān)于h5非全屏設(shè)置我們放最后單獨(dú)說(shuō)。
要想實(shí)現(xiàn)自動(dòng)播放視頻,在iOS8.0需要設(shè)置configuration的mediaPlaybackRequiresUserAction 屬性為false,但是從iOS 9.0開始此屬性被廢棄。改為了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)版本蘋果又引入了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)播放,不設(shè)置則代表都自動(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,則代表無(wú)論音視頻都會(huì)自動(dòng)播放。
oc中設(shè)置非全屏自動(dòng)播放代碼如下:
WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
//設(shè)置非全屏播放
configuration.allowsInlineMediaPlayback = YES;
//不同系統(tǒng)版本適配可自行判斷
configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
_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>
關(guān)注公眾號(hào)【一個(gè)老碼農(nóng)】免費(fèi)獲取iOS進(jìn)階學(xué)習(xí)視頻