H5+ app使用多媒体(video、webview)API视频展示以及全屏

在H5+ 实现混合app的页面中实现视频的展示,进度条以及全屏的实现,设置窗体自定义的导航栏、以及返回返回键

业务场景:点击按钮出现一个视频播放的窗口,该窗口可以根据手机的横竖屏来调整视频的显示,以及具有全屏效果,进度条展示,视频内部有返回键可以取消窗口返回上一个界面,这边我使用的是Vue的前端框框架通过打包形成混合app的方式。

html标签与 H5 api 比较:因为混合app的打包我们可以使用html通过hbuilder打包形成app的展示界面,所有之前有想过使用video标签来实现视频的效果,<video>标签对于进度的支持也是满足的,但是标签对于全屏以及根据重心调整的支持较差,并且重要的是样式的修改是费事费力的。所以我们使用h5+ 提供的api来实现基本的视频展示1

webView: Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

video:Video模块管理多媒体视频相关能力,可用创建视频播放控件,直播推流控件等。

http://www.html5plus.org/doc/zh_cn/webview.html

1.首先我们创建一个窗口,作为承载一个视频的载体,代码如图1

行1:plus.webview.create() 设置创建一个video的窗口 方法的参数在文档有,重要的设置窗体的配置 webviewStyle 如图2  

注意:我们想要的效果是全屏的时候视频满屏,有返回键可点击关闭窗口,于是我们使用窗体自定义导航栏图3 的效果只显示物理返回键,将导航栏设置为透明就可以达到效果


图3

设置titleNView的样式参数图4


图4

注意:设置backButtonAutoControl 为close 这样的话可以将窗口内部的物理返回键设置为点击是关闭窗口,不然的话点击之后设置的虚拟的物理返键会直接退出

图5
图6

2.设置视频

行2:设置一个视频的对象,使用的src 来实现的,videoStyle的参数可以在官网找到

行3:将video的视频添加到设置好的窗口里面

行3:显示窗口

图7
图8
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,573评论 0 17
  • Tips 由于WebView的用法实在太多,如果您只是想查询某个功能的使用——建议Ctrl+F(Commad+F)...
    BugDev阅读 7,807评论 11 109
  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 853评论 0 1
  • WebView常用方法 String getUrl():获取当前页面的URL。 reload():重新reload...
    JuSong阅读 3,366评论 0 3
  • WebView简介 String getUrl():获取当前页面的URL。 reload():重新reload当前...
    QM阅读 3,210评论 0 52