Displaying more than one video side by side on HTML Canvas - Stack Overflow

admin管理员组

文章数量:1125395

I can display one video in canvas using something like the following code :

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" ;  

However the function "step" relies on the local variables in the call stack to access the video element.

I would now like to use the same piece of code to display multiple videos side by side in separate parts on the same canvas with specific left, top, width and height defined for each video.

To do this the function "step" needs to know which video and which view position to access and it also needs to store the "animation-handle" uniquely for each view, for the case where one video needs to be halted. I can store a reference to the video in the view and to the view in the video, but...

function "step" has only two parameters (now and metadata). Neither allows access to the video element or the handle, which would have provided a workaround.

I tried defining the "step" function as "video.step" but "this" still does not give access to "video" For some reason also binding the element "video" to the callback does nothing.

I can display one video in canvas using something like the following code :

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" ;  

However the function "step" relies on the local variables in the call stack to access the video element.

I would now like to use the same piece of code to display multiple videos side by side in separate parts on the same canvas with specific left, top, width and height defined for each video.

To do this the function "step" needs to know which video and which view position to access and it also needs to store the "animation-handle" uniquely for each view, for the case where one video needs to be halted. I can store a reference to the video in the view and to the view in the video, but...

function "step" has only two parameters (now and metadata). Neither allows access to the video element or the handle, which would have provided a workaround.

I tried defining the "step" function as "video.step" but "this" still does not give access to "video" For some reason also binding the element "video" to the callback does nothing.

• html5-canvas
• html5-video

Share Improve this question Follow asked 2 days ago Steve BrookerSteve Brooker 1,1831212 silver badges3030 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Looks like I was incorrect, binding the view to the call to step does work, I had forgotten the need to prefix the list of bound parameters with null and also that the bounded parameters appear before and not after the standard parameters.

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

本文标签： Displaying more than one video side by side on HTML CanvasStack Overflow