WKWebview非全屏自動(dòng)播放h5視頻

本文首發(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è)置WKWebviewconfiguration參數(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è)置configurationallowsInlineMediaPlayback 屬性為true就可以了。當(dāng)然h5端同樣也要支持非全屏播放,否則客戶端設(shè)置此屬性沒有任何作用。關(guān)于h5非全屏設(shè)置我們放最后單獨(dú)說(shuō)。
要想實(shí)現(xiàn)自動(dòng)播放視頻,在iOS8.0需要設(shè)置configurationmediaPlaybackRequiresUserAction 屬性為false,但是從iOS 9.0開始此屬性被廢棄。改為了requiresUserActionForMediaPlayback ,所以iOS9.0 需要設(shè)置requiresUserActionForMediaPlaybackfalse,即可實(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è)置configurationrequiresUserActionForMediaPlayback屬性。
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、WKAudiovisualMediaTypeVideoWKAudiovisualMediaTypeAll三個(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í)視頻

原文地址:WKWebview非全屏自動(dòng)播放h5視頻

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容