在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
网友评论