Multiple video or canvas tags on the web page cause the mobile end to slide unsmoothly and stutter

< hr >

Update:
these pages are all referenced by iframe. I just tested the video page (without passing the reference), and it"s not very stuttered. But I added a parent element and some attributes to the outer layer of iframe, which doesn"t seem to have any effect.
clipboard.png

< hr >

when writing a web page, multiple video tags are used. Click on to open, close, and then slide, which often leads to stutter.
when previewing pdf with mozilla"s pdf.js (creating multiple canvas, to preview multiple pages of PDF), the page slide will also appear stutter,

after testing, it is found that clicking on the blank space (personal understanding is to shift the focus to the page instead of video or canvas), you can slide normally without clicking, and you may not be able to slide and roll back. How to solve this problem?

attach the code to write video

<body>
//8section
  <section class="video-section">
        <h3 class="section-title">1</h3>
        <div class="video-box">
            <video src="video/1.mp4" width="100%" height="auto" controls="controls" poster="video/1.jpg">
                videochrome!
            </video>
       
        </div>
    </section>
    <section class="video-section">
        <h3 class="section-title">2</h3>
        <div class="video-box">
            <video src="video/2.mp4" width="100%" height="auto" controls="controls" poster="video/2.jpg">
                videochrome!
            </video>
        </div>
    </section>
</body>
Aug.04,2021

add a style to all canvas cursor-pointer:none;

my word may be misspelled, please try

Menu