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


在项目中遇到一个挑战:需要在一个页面上放置多个video元素供用户播放。初始尝试直接添加多个video标签导致渲染错误。查阅文档后发现,浏览器限制了一个页面上同时存在的video标签数量。为解决此问题,提出了一个创新方案:使用遮罩层配合动态渲染video标签。当用户点击遮罩层时,隐藏该层并显示对应的video标签,确保页面上始终只有一个video在运行。这种方法有效避免了浏览器渲染限制,实现了多个视频播放的需求。

8220

被折叠的 条评论
为什么被折叠?



