java canvas类播放视频教程_使用canvas播放视频

前期规划

将视频隐藏正常播放

将播放取到画面使用setInterval循环在画布上显示画面，因为 1s 差不多25-30帧，选择每40ms循环一次

绘画中的大小，宽度等于100%，高度垂直居中。x 为 0，y 为(canvas.height - video.height)/2/canvas缩放倍数

视频暂停或者播放结束后，清除定时器

代码如下

html代码

';

js代码

function renderCanvas () {

let $canva, ctx, $video, setInter;

$canva =$('#canvas');

$video = $("#main-video");

ctx = $canva[0].getContext('2d');

$canva.style.width = $canva.parents().width() / 2;

$canva.style.height = $canva.parents().height() / 2;

$video[0].play();

render();

setInter = setInterval(r => {

render();

}, 40)

function render () {

ctx.drawImage($video[0], 0, (canvas.height - video.height)/2/2, video.width(), video.height());

}

// 视频播放结束

$video[0].on('ended', function () {

clearInterval(setInter);

});

// 视频被暂停

$video[0].on('pause', function () {

clearInterval(setInter);

});

}