safari html5 ipad 画板,javascript - drawing html5 video on a canvas - on iPad - Stack Overflow

Have you tried wrapping it inside the requestAnimationFrame() function.

// Fallback to mp4 if not supported.

const video = document.querySelector("video"); // Offscreen Canvas.

const canvas = document.querySelector("canvas"); // Onscreen Canvas.

canvas.style.zIndex = '50';

const ctx = canvas.getContext("2d");

video.addEventListener('play',()=>{

function step() {

ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

requestAnimationFrame(step)

}

requestAnimationFrame(step);

})

Make sure to Match both the onscreen & offscreen canvas to the original videos aspect ratio otherwise the extra calculations make it laggy & poor performance..

You can use Transform Scale inside your css to resize it aslong as its proportionately. Which doesn't seem to make it glitchy, but I'd suggest converting the video from mp4, avi or other file type to webm..

just used this for a vjloop and its running smooth.

Try these and see if it makes any difference..