canvas video UC browser

Question

I'm looking for a way to play video inside canvas/webgl element in UC Browser (mobile) and Samsung Internet browser. I need it for my canvas games.

Next code is not working:

var canvas, context;
var video = document.getElementById("video");

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("click", mouseClick);


function mouseClick(e) {
  video.src = "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4";
  video.addEventListener('loadeddata', function() {
    video.play();
    draw();
  });
}

function draw() {
  context.drawImage(video, 0, 0, 500, 300);
    setTimeout(draw, 50);
}

<canvas id="canvas" width="500" height="300"></canvas>
<video id="video" width="500" height="300">
</video>

Please advice what I'm doing wrong.

Image sequences is too huge in size.

Didn't tried, but mobile browsers will generally not preload anything from your video. So your onloadedmetadata may well never fire. You might want to move your `video.play()` out of this event handler (but still in the click event handler). — Kaiido, Jul 26 '18 at 01:47
forgot to mention that sound plays but video in canvas is black — Valery Pesetski, Jul 31 '18 at 13:50

score 0 · Answer 1 · answered Jul 26 '18 at 14:40

I tried out your code here: https://github.com/poshaughnessy/video-to-canvas-test

Demo here: https://poshaughnessy.github.io/video-to-canvas-test/

But I couldn't replicate a problem with Samsung Internet v7.2. (After a short loading delay) it plays OK for me and renders to the canvas too...

"Image sequences is too huge in size."

Do you mean that the video is scaled incorrectly in the canvas? If so, have you tried adjusting the canvas size and the dimensions passed to the drawImage method? (Currently you are drawing it at 500px width by 300px height, but the video has a 16:9 aspect ratio).

NB. For performance reasons I would recommend using requestAnimationFrame rather than hardcoding the 50ms time delay: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Demo still not working in my Samsung Internet v 7.2 ... by Image sequence I mean export video to jpeg sequence. — Valery Pesetski, Jul 31 '18 at 13:46
You want to create a series of jpeg images? The code you posted above doesn't contain anything to do that - it just draws the video to a canvas. — poshaughnessy, Aug 01 '18 at 17:26

canvas video UC browser

1 Answers1