DCloud_heavensoft
DCloud_heavensoft
  • 发布:2016-04-03 05:38
  • 更新:2023-11-29 09:19
  • 阅读:61143

5+App、wap2app的video、视频播放开发注意

分类:HTML5+

此文不适于uni-app,仅适于5+app

5+App、wap2app的视频播放有3种解决方案,使用HTML5的自带video、原生视频播放,以及使用Native.js调用外部播放器。

  1. HTML5自带video标签,可以播放符合HTML5规范的视频格式。
    注意不含flv、ra等三方商业公司的规范格式。
    HTML5的video在Android上有较多浏览器兼容性问题,这里有篇网友分享的经典文章讲述了HTML5 video的使用注意,http://ask.dcloud.net.cn/article/569
    注意事项,Android上使用video标签播放视频时,务必打开硬件加速,否则只有声音没有画面。
    HBuilder8.8.4以前的版本,在Android5的部分rom上是默认关闭硬件加速的,此时需强制打开硬件加速。创建webview时style里有个hardwareAccelerated参数,设置为true。
    硬件加速的详解参考文档http://ask.dcloud.net.cn/article/55
    视频全屏播放时有时不能自动横屏最大化,参考http://ask.dcloud.net.cn/article/1077
    HTML5自带video,如果想实现手势拖动进度,这里有篇参考文章http://ask.dcloud.net.cn/article/13263,但受限于HTML5的性能,拖动无法流畅跟手。
    从HBuilderX 2.5.3起,Android上新增了x5内核,使用x5播放视频,表现优于Webview自带的video标签。使用x5详见:https://ask.dcloud.net.cn/article/36806

iOS的视频播放,使用uiWebview和wkWebview有不同效果,wkWebview的视频播放自带AirPlay功能,可以直接连接电视。但需要注意wkWebview和uiWebview的差异,详见http://ask.dcloud.net.cn/article/1318

  1. 原生视频
    很多开发者对于HTML5自带视频有几处不满:
    a) 支持格式不丰富,比如flv
    b) 全屏后手势拖动不流畅,不能顺滑的拖动进度和音量、亮度
    在开发者提供直播推流时,5+引擎引入了专业视频解码库,也就顺便提供了plus.video的原生视频播放能力。
    但plus.video的原生视频播放会增加不少包体积,需要开发者自己平衡好需求。
    5+App里原生视频控件需要使用js创建,参考http://www.html5plus.org/doc/zh_cn/video.html
    uni-app里的video组件,默认不是HTML的video,默认就是原生video。
    使用原生video注意它的层级较高,覆盖原生控件,在5+app里使用plus.nativeObj.view,在uni-app里使用cover-view、plus.nativeObj.view、subnvue都可以,如果是nvue,那不存在层级问题,并且全屏后的视频也可以随意自定义界面。从体验角度,最好的是nvue的video。

  2. 除了HTML5的video,开发者也可以在Android上使用Native.js调用系统播放器来放视频。
    但视频的播放进度等状态无法回传给js层。
    参考http://ask.dcloud.net.cn/question/614

21 关注 分享
qmit 明峰 秋天无风 Trust Dojoson 杰哥seo k***@gmail.com 8***@qq.com 逐鹿实验室 Warn MooGu 菜鸡 f***@hotmail.com g***@qq.com 睡不醒哎 阿居 7***@qq.com Kimber 2***@qq.com 2***@qq.com ifunction

要回复文章请先登录注册

DCloud_uniAD_HDX

DCloud_uniAD_HDX

回复 likemea4 :
uni-app nvue 支持,参考代码 https://github.com/dcloudio/hello-uniapp/tree/master/pages/component/cover-view
2019-12-28 11:43
6***@qq.com

6***@qq.com

回复 DCloud_heavensoft :
你好前辈,请问下,目前项目进行到了这个地步。使用的 plus.video 方式展示视频播放器,可以用户要求,播放器需要增加倍数,清晰度切换,上一个,下一个,这些自定义控件我准备使用 plus.nativeObj.view 方式来处理,但测试时发现全屏情况下无法覆盖,这个要如何解决,或者有没有兼容安卓及苹果的 js或demo(video.js存在兼容问题)
2019-12-28 10:57
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 likemea4 :
uni-app的video文档里写了,全屏后自定义界面,需要使用nvue。plus.nativeObj.view不能控制全屏后的video
2019-12-25 18:12
likemea4

likemea4

回复 rainbow1218 :
请问 您实现了吗 全屏的时候加文字
2019-12-25 17:34
rainbow1218

rainbow1218

回复 PHP全栈工程师 :
请问,这问题解决了吗?
2019-07-10 15:20
沐尘

沐尘

下载的文件只能下载到sdk里面?没有sdk的情况下怎么下载到内部存储
2019-05-20 17:27
沐尘

沐尘

请问可不可以缓存视频?
2019-05-20 17:26
Kimber

Kimber

请问在视频推流后,拉流播放时画面正常,声音卡的无法听清楚,这种情况该怎样解决
2019-05-09 14:58
辛德瑞拉

辛德瑞拉

回复 rem486 :
可以设置呀,文档就有的,我已经设置了
2019-02-22 14:19
zino

zino

plus.video 在电视盒子上很卡,请问有办法优化吗?声音是流畅的,就是画面一顿一顿地。
2019-02-22 13:29