Multiple video tags play videos in a loop and render together with canvas animation, the video will cause freeze

Questions
,
1

I created a 3D scene with looping animation through threejs, and placed 8 video tags on the page to loop 8 different videos, and the size of the 8 video files does not exceed 100mb. After the page was open for a while, the video started to freeze. I would like to ask if anyone has encountered such a situation and how to solve it.

I’ve tried reducing the number of videos and this doesn’t happen anymore.I guess whether there is some resource occupation between the looping video and the 3D scene, which causes the video to freeze. But I want to solve this while keeping the number of videos. I also found that by limiting the frame rate, the freezing phenomenon can be alleviated.

video tag settings：

  <video
    autoplay
    loop
    preload="auto"
    muted
  >
    <source src="my url to mp4" type="video/mp4" />
  </video>
2

Can you please check if this still happens with the latest dev version? You find the respective build files here: https://github.com/mrdoob/three.js/tree/dev/build

3

I checked. The latest version also has this problem.

4

Any chances to demonstrate what you are doing with a live example? three.js dev template - module - JSFiddle - Code Playground

5

Ok, just give me some time to prepare.