How images by js or node background, can make more pictures into video playback,
Similar to taobao commodity main photo video,

CodePudding user response:

That is called a round figure, loop for more pictures, plug-in many on the net, their implementation is relative positioning, timer, then after how many seconds of the current div shift to the left or right, can be achieved

CodePudding user response:

Want to do is video, images into video, (similar to taobao goods, more than the shuffling, is the first video, this is video, can put the picture generated more video)
By figure, it is too simple,

CodePudding user response:

This to the backend support, using ffmpeg can do

CodePudding user response:

Require the backend support, but front can show, front end to achieve the corresponding effect

CodePudding user response:

Make a video is pretty simple, send a few pictures come over, I help you,

CodePudding user response:

With canvas is animated, and use the canvas captureStream into video streaming, can use a video element,

CodePudding user response:

Can generate. Mp4 files?

More pictures drawn animation can be not? Like my two images by zoom in on by drawing a 10 seconds of animation,

CodePudding user response:

CaptureStream is live streaming, the browser like provided no save method, need save only push server to record,

CodePudding user response:

refer to 7th floor gqkmiss response:

can generate. Mp4 files?

More pictures drawn animation can be not? Like my two images by zoom in on by drawing a 10 seconds of animation,

Suggestion:
1, to use canvas for animation control, such as 5 seconds per image, amplifier, 2.5 seconds, 2.5 seconds, you can use requestAnimationFrame then coupled with the passage of time to control,
2, using the MediaRecorder recording, pseudo code is as follows:

 const mediaStream=canvas. CaptureStream (); 

Const options={
MimeType: 'video/webm; Codecs, 
=vp9 'VideoBitsPerSecond: 3000000, 
}; 
Const mediaRecord=new MediaRecorder (mediaStream, options); 

3, articulated ondataavailable, stop events: mediaRecord. Ondataavailable=this. Ondataavailable; MediaRecord. Onstop=this. Onstop;
4, start recording: mediaRecord. Start (100);//100 milliseconds to trigger a ondataavailable event
5, in ondataavailable event video data cache: enclosing chunks. Push (e.d ata);
6, after the recording, will cache the video into a Blob:
Const videoBlob=new Blob (enclosing chunks, {type: 'video/webm});
Const videoUrl=window. URL. CreateObjectURL (videoBlob);
Enclosing the download (owner. The title, videoUrl);

Private download=(name: string, url: string)=& gt; {
Const a=document. The createElement method (' a ');
A.s tyle. Display='none';
A.h ref=https://bbs.csdn.net/topics/url;
A. d. ownload=${name}. ` webm `;
Document. The body. The appendChild (a);
A.c lick ();
SetTimeout ()=& gt; {
Document. Body. RemoveChild (a);
Window. URL. RevokeObjectURL (URL);
}, 100);
};