在 canvas 上绘制 html5 视频 - 在 iPad 上

Question

I'm drawing a video on a canvas, this works fine with Safari / Chrome / Firefox / Opera, but on the iPad, even though the video plays, (correct codec, etc) it is never rendered on the canvas,

Basically I just call:

canvas.getContext("2d").drawImage(video, 0, 0);

when the video is playing, and stop doing this when the video is paused or ended.

Is there anything else I should consider? Like clearing the canvas?

Answer 1

For now safari on iPad is not supporting this feature. There are some limits on the attributes and events of canvas tag and video tag of HTML5 particularly on iPad. The attributes and events of canvas and video tags which work fine on desktop browsers wont work on iPad. This is my personal experience too.

Answer 2

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

<video src="YourSrcFile.webm" autolay muted></video>
         // Fallback to mp4 if not supported.
<canvas></canvas>

    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..

Answer 3

<script>
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth / 100);
    var ch = Math.floor(canvas.clientHeight / 100);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}
</script>

Answer 4

See Putting Video on Canvas

You basically can't pass a video object to the canvas drawImage method. Apple suggests having the video positioned behind the canvas but this won't help if you want to manipulate the video somehow.