文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

WKWebview非全屏自动播放h5视频的实现方法(Swift、OC)

2022-05-16 15:30

关注

前言

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之后又被废弃了。系统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及之后系统版本苹果又引入了mediaTypesRequiringUserActionForPlayback 属性。在Swift中,此属性是一个WKAudiovisualMediaTypes结构体。此结构体为我们提供了三个静态值,分别为audio、video、all。audio则代表自动播放音频,video代表自动播放视频,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一样,需要设置mediaTypesRequiringUserActionForPlayback属性,以上三个属性名字与Swift中完全一样。

但是与swift不同的是,在objective-c中,mediaTypesRequiringUserActionForPlayback的属性是一个枚举。且比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端都必须做相应的设置。上面我们讲了App端非全屏播放的方法,最后我们来讲一下在h5端怎么设置。

在h5中非全屏播放被称之为内联播放。如果要支持内联播放,需要在video标签设置playsinline属性为true。但是playsinline仅支持iOS 10版本以上的系统。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视频内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯