admin管理员组

文章数量:1659745

视频页面部分体检兼容问题:

H5的技术已整体趋于成熟,但在视频播放方面,如果跟PC端的Flashplayer对比的话,功能就显的非常简单了。如果要让视频支持在手机端(主要是iPhone)播放的话,需要了解下面这些内容。

1:视频格式必需是mp4的,iphone不支持flv,如果是Hls视频,格式应该是m3u8,不支持rtmp协议的播放;

2:H5不能把多个mp4合并成一个视频播放(像ckplayer在PC端的那样),导致多个视频来回切换体验不佳;

3:H5的API总体来说还是够用的,比如用

4:H5的自动播放并不是所有的平台都支持,在有些环境(手机),即使你设置了视频自动播放,环境也不允许该命令执行,必需经过用户点击才能播放。

5:H5在有些环境中(手机)必需点击全屏按钮才会触发视频播放;

总体说来,就是不同的平台(系统类型和浏览器类型)对H5并没有一个统一的标准。所以可能出现不同的问题,视频兼容要在多个不同型号手机测试;

6:一些机型播放视频脱离文本流,不能在H5页面播放视频(会导致H5事件触发不生效),系统会自动接管视频;IOS设备可以强制不调用系统内置播放器,安卓的一些机型强制不脱离文本流的方式无法生效;

7:视频页面加载之后页面空白,无缩略效果(移动端H5视频的诟病),需要增加一张视频未播放之前覆盖到之上的视频缩略图;

8:以上各点会造成移动端H5视频页面(仿抖音效果)体验不佳,甚至会引起页面卡死;

9:建议视频H5页面 => App原生页面;

Android 效果

型号:小米5S

播放前

播放前页面无缩略效果,白屏

切换时视频区域消失

切换时视频区域消失

IOS效果:

IOS效果较好;

本文标签: 视频缩略图页面网页兼容问题