cloneNode() 使 html 视频滞后，有时根本不渲染

Question

当我单击 video 时，它应该从其原始位置动画到某个目标位置。由于某些原因，我无法为原始 video 元素制作动画，因此我为由 cloneNode() 创建的克隆制作动画。单击时，我只循环浏览大约 5 个视频（长度不到 20 秒）和 5 张图像。我的动画方法只导致视频滞后，有时根本不渲染，而图像似乎不受影响。我注释掉了除一行之外的所有动画代码：

var clone = videoElement.cloneNode( false ); 

没有动画代码，images/videos 只是瞬间传送到目标位置（这是预期的）。但是，当我相对较快地单击时，不注释那一行，会导致视频有点滞后（如果我幸运的话），有时根本不会在 Chrome 中呈现。在 Edge 中，视频需要几秒钟才能呈现。删除那条线，无论我点击多快，视频 load/render 都很好。

1. 为什么会这样？ cloneNode 真的有那么慢吗？
2. 这个问题有什么实际的解决办法吗？

Answer 1

问题似乎出在 cloneNode() 上，但事实证明这是因为我使用 mp4 文件作为我的视频源。 mp4 在 Chrome 中已弃用。一旦我转换为 webm 视频文件，lag/rendering 问题就完全消失了。