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

ios端默认全屏解决办法

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

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

 

 
 

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

video自动播放黑屏

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

 

 
 

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

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

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

 

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

---

 

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