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, проблема с задержкой/рендерингом полностью исчезла.