一种基于IOSWebView的应用内外悬浮窗实现方法与流程

一种基于ios webview的应用内外悬浮窗实现方法
技术领域
1.本发明涉及应用程序技术领域，具体涉及一种基于ios webview的应用内外悬浮窗实现方法。


背景技术：

2.在手机应用中，悬浮窗的应用非常广泛，由于应用悬浮窗需要实现跨应用交流、应用后台运行等功能，因此需要系统权限许可，主流的应用搭建平台主要分为安卓和苹果，其中苹果平台的对于应用权限的限制严格，实现跨应用悬浮窗常通过pip功能实现，该功能从原生开发到接入点pip任务量比较大，并且需要 avplayerviewcontroller或 avpictureinpicturecontroller 的方式来实现，这两种方式首先需要有原生的开发能力，了解两种方式实现的方法，并且需要webview和原生应用进行负责的数据交互，这很可能在一定程度上出现交互异常。因此迫切需要一种开发步骤更加便捷的跨应用悬浮窗实现方法。


技术实现要素：

3.针对现有技术的不足，本发明提出一种基于ios webview的应用内外悬浮窗实现方法，缩短开发周期，同时能够实现通过webview跨应用的小窗播放。
4.自ios8开始，苹果推出了新框架webkit，其提供了替换uiwebview的wkwebview组件，一个用来展示网页的组件。
5.本发明的技术方案是这样实现的：一种基于ios webview的应用内外悬浮窗实现方法，包括：在原生app中新建wkwebview，将allowspictureinpicturemediaplayback 属性设置为yes，使所述webview中的video标签具备开启画中画的能力；在html5 中添加video标签的监听方法，与所述原生app建立交流通道，将监听到的方法通知给wkwebview，以使原生app获得所述wkwebview 画中画的开启或者关闭状态；开启画中画时，通过 html5 调用 video 标签requestpictureinpicture() api方法，以使video标签生成画中画；关闭画中画时，点击关闭按钮或恢复按钮或调用html5 document的exitpictureinpicture() api 方法，以使画中画归还给持有它的webview 。
6.进一步地，所述添加video标签的监听方法中包括enterpictureinpicture监听方法：使所述video标签进入画中画模式；leavepictureinpicture监听方法：使所述video标签离开画中画模式 。
7.进一步地，在开启画中画时，还包括以下步骤：html5 接收到 enterpictureinpicture的回调指令，通知原生app；原生app条状并加载其它webview页面，同时拥有画中画的webview会被其它方式持有；进一步地，在关闭画中画时，还包括以下步骤：html5 接收到
leavepictureinpicture的回调指令，通知所述原生app，所述原生app销毁此webview 以释放内存。
8.本发明还提出了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序指令，当所述计算机程序指令被运行时，实现如上任一项所述的方法。
9.与现有技术相比，本发明具有以下优点。
10.本发明通过改变webview里面的video标签的表现形式来实现pip模式，无需应用avplayerviewcontroller或 avpictureinpicturecontroller 的方式，更加便捷的实现了应用内外悬浮窗的功能。
附图说明
11.为了更清楚地说明本发明实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
12.图1为本发明一种基于ios webview的应用内外悬浮窗实现方法的流程示意图。
具体实施方式
13.下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。
14.现有技术中实现跨应用悬浮窗常通过pip功能实现，该功能需要 avplayerviewcontroller或 avpictureinpicturecontroller 的方式来实现，这两种方式首先需要有原生的开发能力，了解两种方式实现的方法，并且需要webview和原生应用进行负责的数据交互，这很可能在一定程度上出现交互异常。
15.因此如图1所示，本发明实施方式公开了一种基于ios webview的应用内外悬浮窗实现方法，包括以下步骤。
16.一种基于ios webview的应用内外悬浮窗实现方法，包括：在原生app中新建wkwebview，将allowspictureinpicturemediaplayback 属性设置为yes，使所述webview中的video标签具备开启画中画的能力；在html5 中添加video标签的监听方法，与所述原生app建立交流通道，将监听到的方法通知给wkwebview，以使原生app获得所述wkwebview 画中画的开启或者关闭状态；需要开启画中画时，通过 html5 调用 video 标签requestpictureinpicture() api方法，以使video标签生成画中画；关闭画中画时，点击关闭按钮或恢复按钮或调用html5 document的exitpictureinpicture() api 方法，以使画中画归还给持有它的webview 。document的exitpictureinpicture()方法作用是退出画中画，与点击关闭按钮的作用相同。另一优选的实施方法中，还能通过document的pictureinpictureelement属性获取是否此时存在正在画中画的元素，该方法用于获取画中画是否存在，如存在则画中画就会归还给持有它的
webview。
17.通过以上步骤，完成了整个悬浮小窗的开启，在开启画中画即 pip模式 时，该悬浮小窗为应用级，因此可以跨应用进行播放，并且可以实现观看小窗内容的同时处理其它应用事件，达到了多应用切换的同时播放的能力。
18.进一步地，所述添加video标签的监听方法中包括：enterpictureinpicture监听方法：使所述video标签进入画中画模式；leavepictureinpicture监听方法：使所述video标签离开画中画模式 。
19.进一步地实施方式，在开启画中画时，还包括以下步骤：html5 接收到 enterpictureinpicture的回调指令，通知原生app；所述原生app条状并加载其它webview页面，同时拥有画中画的webview会被其它方式持有；进一步地实施方式，在关闭画中画时，还包括以下步骤：html5 接收到leavepictureinpicture的回调指令，通知所述原生app，所述原生app销毁此webview 以释放内存；避免过度占用用户手机内存，使程序运行更流畅。
20.本发明还提出了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序指令，当所述计算机程序指令被运行时，实现如上任一项所述的方法。
21.综上所述，本发明的具有以下有益效果：1、降低播放器功能开发的难度，该功能实现通常都是基于原生系统的播放器支持此功能，并且需要初始化播放器，因此就会增加内存的消耗。原生在使用播放器时就需要了解一些必要的api，因此也需要做很多技术储备，包括内存优化等，通过本2、混合开发，降低多端开发的成本，该模式通常由“html5云网站 app应用客户端”两部份构成，app应用客户端只需安装应用的框架部份，而应用的数据则是每次打开app的时候，去云端取数据呈现给手机用户。
22.以上所述仅为本发明的较佳实施方式而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。