react 移动端 实现video的自动播放

之前因为要实现视频的自动播放，就先做了一个原生的视频自动播放demo，但是真的想要在实际的项目中实现起来就步步是坑。坑，我已经踩过了，在这里分享一下react在移动端中如何实现视频的自动播放。

项目背景

这个项目是react结合Ios和Android实现的一个APP，应甲方爸爸的要求，实现一个朋友圈内视频的自动播放。大概就是这个样式。

需求分析

当拿到需求的时候第一反应应该就是去百度了吧。网上有很多列子，也有很多踩坑的经验，但是看下来很少有实际完成的。我们逐步来分析一下这个需求：

大方向是实现视频的自动播放，这是我们的主方向，确定！
根据这个我们可以先考虑一下以下几个问题

1. 应该如何去创建视频元素
2. 在什么的情况下才去播放这个视频？
3. 然后在什么情况下，去暂停这个视频？
4. 又怎么去视频去播放，怎么去暂停？
5. 我们如何获取到当前是哪个视频？
6. 又怎么获取到下一个即将来临的视频？
7. 如何去兼容IOS和Android？
   这是我们在拿到这个需求之后所想到的问题，如果能够顺利的解决这些问题，那我们也就完成了这个需求。下面我们去实现它

实现

1.应该如何去创建视频元素

我们逐个的解决这些问题，先看第一个，《应该如何去创建视频元素》
上文有说到，这是在一个相当于在朋友圈一样的页面下实现的，第一步应该去搭建这个页面，都知道在朋友圈的内容很丰富，有图片，文字，视频，也有可能是两两结合。我建议在做结构搭建的时候用如下的结构：

<div>