Элемент <video> обычно требует меньше ресурсов процессора, чем элемент <canvas>, так как он просто воспроизводит заранее подготовленное видео.
Для данного случая, если требуется реализовать анимацию только один раз до определенного действия пользователя, то использование элемента <video> будет более эффективным решением. Вы можете подготовить видео с необходимой анимацией и воспроизводить его при возникновении определенного события, например, щелчка мыши. Это позволит снизить нагрузку на процессор пользователя, так как не требуется перерисовывать анимацию каждый раз с использованием элемента <canvas>.