extract an image from mp4

Is there a way to extract images from mp4 files using php or js?
Also, would it be possible to bring out thumbnails with the ingenuity of html?

I would appreciate it if you could let me know the details.

javascript php html

2022-09-29 21:29

1 Answers

As the usage is unknown, I will not verify or mention the performance.Also, the environment is unknown, so we assume the latest environment.

Most major browsers these days can play mp4 in HTML5 video elements, so
If js is available, the screen drawn with this video element can be exported as an image to a canvas element (if video is enough to support mp4), and if necessary, it can be converted to any image format to the extent supported by the API (or using the required library).
In the sample, the location of the video is selected in the seek bar, and the screen of the moment is displayed in canvas.

thumbnailView.getContext('2d').drawImage(videoRender,0,0,videoRender.videoWidth,videoRender.videoHeight);

is the process of doing this (read on HTML5 video) and try it with the right video file.

Also, would it be possible to bring out thumbnails with the ingenuity of html?

I didn't really understand my intentions, but I tried to display the jpeg image of data url exported from canvas.

var selectFile= document.querySelector('#sourceInputFile');
var videoRenderer= document.createElement('video');
var seek= document.querySelector('#seekInputRange');
var exportJpeg= document.querySelector('#exportJpegInputButton');

var videoRendererLoaded=false;
videoRenderer.addEventListener('loadedmetadata', function(){
  videoRendererLoaded=true;
  thumbnailView.width=videoRender.videoWidth;
  thumbnailView.height=videoRender.videoHeight;
});

videoRenderer.addEventListener('seeked', function(){
  thumbnailView.getContext('2d').drawImage(videoRenderer,0,0);
});

selectFile.addEventListener('change', function(e){
  var file = selectFile.files[0];
  if(file&videoRenderer.canPlayType(file.type)){
    videoRendererLoaded=false;
    seek.value = 0;
    videoRenderer.src=(URL||webkitURL).createObjectURL(selectFile.files[0]);
  }
});

seek.addEventListener('input', function(){
  if(videoRendererLoaded){
    videoRenderer.currentTime=seek.value*videoRenderer.duration;
  }
});

exportJpeg.addEventListener('click', function(){
  if(videoRendererLoaded){
    varimg = new Image();
    img.src=thumbnailView.toDataURL('image/jpeg');
    document.body.appendChild(img);
  };
});

source video file:<input id="sourceInputFile" type="file"/>
<br of >
seek position: <input id="seekInputRange" type="range" min="0" max="1" step="0.001" />
<br of >
thumbnail:
<br of >
<canvasid="thumbnailView">/canvas>
<br of >
<input id="exportJpegInputButton" type="button" value="Export thumbnail as JPEG image"/>

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656