在项目中有需求为:在一个页面放多个video,并且点击video可以播放视频。
一开始没想那么多,直接贴贴贴上去,一打开直接渲染一堆video标签,后来发现了渲染错误,开头的标签可以渲染出来,到后面就全挂掉了。
翻了会文档知道,这玩意不能一下放好多上去,一个页面也就能放两三个同时存在,那么我这需求咋实现呢??
又翻了一会,想到了个办法,咱们可以在不播放它的时候就不渲染video标签,想播放的时候再给它渲染出来。
这里放个图不放代码了,很杂,大致思路就是给video标签做个遮罩层,遮罩上写点击播放,在用户点击的时候隐藏遮罩层,渲染下层的video标签,在点击其他遮罩层的时候开启其他遮罩层,保证本页面上始终只存在一个video标签就OK啦。