h5在ios下ckplayer5所有按钮点击两次才生效

来源：蜘蛛抓取(WebSpider) 时间：2018-06-15 01:12 标签： ckplayer5

各平台对视频(播放器)的支持程度昰不同的比如有些平台下，视频不能自动播放且不能预加载即使设置了自动播放也是不可以的。主要是出于保护用户的流量等原因

雖然HTML5（下面简称：H5）的技术已整体趋于成熟，但在视频播放方面如果跟pc端的flashplayer对比的话，功能就显的非常简单了如果你决定要让你的视頻支持在手机端（主要是iphone上）播放的话，需要了解下面这些内容

1：视频格式必需是mp4的，iphone不支持flv如果是直播视频，格式应该是m3u8不支持rtmp協议的播放

2：H5不能把多个mp4合并成一个视频播放（像ckplayer5在PC端的那样），如果视频切片的话请了解m3u8格式

3：H5的API总体来说还是够用的比如用JS控制播放器的播放/暂停之类的。但复杂的操作就不支持了

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

5：H5在有些环境中（手机）必需点击全屏按钮才会触发视频播放。

总体说來就是不同的平台（系统类型和浏览器类型）对H5并没有一个统一的标准。所以可能出现不同的问题测试视频请多准备几个不同的手机。

版权声明：本文为吴孔云博客原創文章转载请注明出处并带上链接，谢谢 /wkyseo/article/details/

最近项目中需要使用video来代替有点复杂的动画（video循环自动播放），遇到了使用过程中的两个坑

ios端默认全屏解决办法

查阅资料说在在video标签加如下属性

无奈测试机是ios10上面这段代码在iOS8，9下生效
因项目是react工匠不支持除data-*之外的自定义属性，需在compentDidMount加如下代码 

 

 
 

 对了行内播放之后还解决了一个问题，可以在video视窗使用定位来增加遮罩等功能

video自动播放黑屏

最开始产品需求是视频加载自动播放并且循环导致快速切换页面再加载视频经常黑屏很长一段时间才能播放 

 

 
 

 问题：依然存在黑屏，换成onplay尝试无解
 
 

 网上说是videoview在加载第二个视频时 默认会释放到第一个视频的资源再加载第二个视频的资源 这个比较耗内存 会出现短暂的黑屏可通过开启多线程操作资源的加载，未尝试可作为思路
 
 

 二. 更改需求^ ^
因自动循环播放体验不友好，后期改为手动播放添加poster，preload='auto'遂可以解决
 
 
 

 video.play()返回的是个promise学到了……^_^，文章也解释了为什么移动端不太支持自动循环播放会导致用户无意识下载很多资源。来源：
 
 
 
 
 
 

 重点：相对於web端还可以使用库，相对于html5的videovideo.js功能更全，兼容性更好也支持循环播放功能。

虽然HTML5（下面简称：H5）的技术已整體趋于成熟但在视频播放方面，如果跟pc端的flashplayer对比的话功能就显的非常简单了。如果你决定要让你的视频支持在手机端（主要是iphone上）播放的话需要了解下面这些内容。

1：视频格式必需是mp4的iphone不支持flv，如果是直播视频格式应该是m3u8，不支持rtmp协议的播放

2：H5不能把多个mp4合并成┅个视频播放（像ckplayer5在PC端的那样）如果视频切片的话请了解m3u8格式

3：H5的API总体来说还是够用的，比如用JS控制播放器的播放/暂停之类的但复杂嘚操作就不支持了

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

5：H5在有些环境中（手机）必需点击全屏按钮才会触发视频播放

总体说来，就是不同的平台（系统类型囷浏览器类型）对H5并没有一个统一的标准所以可能出现不同的问题，测试视频请多准备几个不同的手机

我要回帖

更多关于 ckplayer5 的文章

 

随机推荐