在 HTML Canvas 上并排显示多个视频

Question

我可以使用类似以下代码的方式在画布中显示一个视频：

let animation_handle;
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let video = document.createElement ("video");

function step() {
ctx.drawImage (video, 0, 0, canvas.width, canvas.height);
animation_handle = video.requestVideoFrameCallback (step);
}

video.onloadeddata = function () {
video.playbackRate = 1 ;
video.play ();
step()
}
video.src = "video href" ;  

然而，函数“step”依赖于调用堆栈中的局部变量来访问视频元素。

我现在想使用同一段代码在同一画布上的不同部分并排显示多个视频，并为每个视频定义特定的左侧、顶部、宽度和高度。

为此，函数“step”需要知道要访问哪个视频和哪个视图位置，并且还需要为每个视图唯一存储“动画句柄”，以应对一个视频需要暂停的情况。我可以存储对视图中视频和视频中视图的引用，但是...

函数“step”只有两个参数（现在和元数据）。两者都不允许访问视频元素或句柄，这将提供一个解决方法。

我尝试将“step”函数定义为“video.step”，但“this”仍然无法访问“video” 由于某种原因，将元素“video”绑定到回调也不会执行任何操作。

Answer 1

看起来我错了，将视图绑定到对步骤的调用确实有效，我忘记了需要在绑定参数列表中添加 null 前缀，并且绑定参数出现在标准参数之前而不是之后。

function PlayVideoInView (View, ViewGroup) 
// View is where to display, 
// ViewGroup is what video to display
{
var video = ViewsData [View][VWAVideoPlaying] = document.createElement ("video");
video.View = View ;

step = function (view,now,metadata)
    { 
    SimulationContext.drawImage (ViewsData [view][VWAVideoPlaying], ViewsData [view][VWALeftX], ViewsData [view][VWAUpperY], ViewsData [view][VWAWidth], ViewsData [view][VWAHeight]);
    ViewsData [view][VWAVideoPlaying].handle = ViewsData [view][VWAVideoPlaying].requestVideoFrameCallback (step.bind (null,view));
    };

video.onloadeddata = function ()
    {
    this.play ();
    step (this.View);
    };

video.onended = function ()
    {
    this.cancelVideoFrameCallback (this.handle);
    ViewsData [this.View][VWAVideoPlaying] = undefined ;
    };

video.src = "Videos/" + ViewGroup + ".mp4" ;

}; // end of PlayVideoInView function