cloneNode() делает задержку видео html и иногда не делает вообще

Question

Когда я нажимаю video, он должен анимироваться из своей исходной позиции в какую-то целевую позицию. По причинам, я не могу оживить оригинал video элемент, поэтому я оживляю клон, который создается cloneNode(), Я просто перебираю около 5 видео (длиной менее 20 секунд) и 5 ​​изображений при нажатии. Мой метод анимации заключался в том, что только видео задерживалось, а иногда вообще не отображалось, в то время как изображения казались незатронутыми Я закомментировал весь мой анимационный код, за исключением одной строки:

var clone = videoElement.cloneNode( false ); 

Без анимационного кода изображения / видео просто телепортируются в целевую позицию мгновенно (что ожидается). Но если оставить эту единственную строку без комментария, когда я нажимаю относительно быстро, видео немного запаздывает (если повезет), а иногда вообще не отображается в Chrome. В Edge рендеринг видео занимает несколько секунд. Удаляя эту строку, видео загружается / отображается просто отлично, независимо от того, насколько быстро я нажимаю.

1. Почему это происходит? Является cloneNode действительно так медленно?
2. Есть ли практические решения этой проблемы?

Answer 1

Казалось, что проблема была в cloneNode(), но оказалось, что это потому, что я использовал файлы mp4 в качестве источника для своих видео. mp4 устарела в Chrome. Как только я преобразовал видеофайлы в webm, проблема задержки / рендеринга полностью исчезла.