video视频多个循环播放

做项目的时候遇到一个问题，记录一下：

要求是播完第一个视频以后，再无缝衔接第二个视频并循环播放第二个视频。

一开始想的是用一个video标签去播放视频

<video
    className="video"
    ref={dom => (this.videoDom = dom)}
    preload="auto"
    poster={videoBg}
    webkit-playsinline="true"
    playsInline={true}
    x-webkit-airplay="true"
    src={video}
    style={{ opacity: display }}
    autoPlay={true}
/>

然后监听结束事件，并在结束的时候替换视频的路径，即改变src的值。

但是这样的结果是，第一个视频结束以后，iOS系统的设备会闪现一个黑屏。安卓手机不闪黑屏，但是也会在第一个视频播完以后短暂停顿一段时间，等待第二个视频加载以后再开始播放。

所以并不是无缝衔接。

第二个思路是使用两个video标签，一开始就预加载两个视频，等第一个视频播完以后隐藏，直接播第二个视频并显示。

然后又出现了ios的设备播不了视频，会报错白屏。而且我也不知道它报的什么错，，，整了半天发现把第二个video标签的 autoPlay={true} 改成 autoPlay={false} 就可以能让那些ios设备正常播放。所以我以为是一个页面不能同时播放两个视频，但是后面自己另外用两个简单的video标签在网页上测试，发现是可以同时播放两个视频的。

然后发现好像跟 webkit-playsinline=“true” ， playsInline={true} ，x-webkit-airplay 有关系，删掉他们就可以了，具体是什么原因也没查到。加这几个属性是为了在苹果手机上阻止视频全屏播放，因为我们的视频是指定在客户端的某一块区域显示。所以在这里，我并不能去删掉这些属性。

我的解决方法就是把第二个视频的 autoPlay 属性去掉。

现在就剩ios9的设备在这个页面在客户端就是报错不显示状态，具体报什么错也看不到，调试机子太lj, , , 反复查找问题后，感觉还是不能在一个页面放两个video标签播放两个视频，注掉第二个循环的视频以后就没问题了。

最后就是ios9的设备只播第一个视频，其他正常的设备上播完第一个视频以后再循环播放第二个视频。

<video
    className={`video`}
     ref={dom => (this.videoDom = dom)}
     preload="auto"
     poster={videoBg}
     webkit-playsinline="true"
     playsInline={true}
     x-webkit-airplay="true"
     src={video}
     style={{ opacity: display }}
     autoPlay={true}
 />
 {UA.iosClient && UA.ios9 ? null : <video
     className={`video`}
     ref={dom => (this.loopVideoDom = dom)}
     preload="auto"
     poster={videoBg}
     webkit-playsinline="true"
     playsInline={true}
     x-webkit-airplay="true"
     src={loopVideosrc}
     style={{ opacity: loopVideoStyle }}
 />}

我不知道有没有什么更好的方法去解决，或者知道是什么原因导致的这种问题，希望后面能慢慢去真的弄懂。