Geek Answers Handbook

Get the first javascript movie clip

How can I get the first frame of a video file in javascript as an image?

+5
source share
5 answers

Just add a video tag to the page without controls and automatic playback.

<video width="96" height="54" class="clip-thumbnail"> ... </video>

The disadvantage is that users can play the video by right-clicking on the thumbnail and selecting “play” in the context menu. To avoid this, you will need a little javascript that listens for click events and cancels them (removing the context menu from thumbnails).

+3
source

Javascript is not able to do this.

+2
source

As already mentioned, Javascript cannot do this.

If you want to create thumbnails for your videos, you need to create a thumbnail server, and then just show the image on the client, like any other image.

My method of choice for this is the ffmpeg decoder. It can handle many file formats and is capable of doing what you want. Therefore, if you have a video called hello.avi , you can do:

 ffmpeg -itsoffset -1 -i /path/to/hello.avi -vcodec mjpeg -vframes 1 -an -f rawvideo -s 200x150 /path/to/hello.jpg

You can run this command (correcting paths and measurements ...) using any language on the server side that will be used and create a thumbnail of the video file.

+2
source

Perhaps if the video is a file selected by the user in <input type="file"> , you can get base-64 video data using the FileReader API:

https://developer.mozilla.org/en-US/docs/DOM/FileReader

From there, you simply remain with the extremely insoluble problem of video decoding and somehow select and create one frame in javascript. Alternatively, you can simply include all the videos as a “thumbnail preview” (I assume why you are doing this?), As shown here:

http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/

Not sure if this last example is compatible, or how well it works with larger video files (I heard that you can easily handle URL length restrictions)

0
source

This can be done using HTML 5 video and canvas tags:

HTML:

 <input type="file" id="file" name="file"> <video id="main-video" controls> <source type="video/mp4"> </video> <canvas id="video-canvas"></canvas>

Javascript:

 var _CANVAS = document.querySelector("#video-canvas"); var _CTX = _CANVAS.getContext("2d"); var _VIDEO = document.querySelector("#main-video"); document.querySelector("#file").addEventListener('change', function() { // Object Url as the video source document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file").files[0])); // Load the video and show it _VIDEO.load(); // Load metadata of the video to get video duration and dimensions _VIDEO.addEventListener('loadedmetadata', function() { // Set canvas dimensions same as video dimensions _CANVAS.width = _VIDEO.videoWidth; _CANVAS.height = _VIDEO.videoHeight; }); _VIDEO.addEventListener('canplay', function() { _CANVAS.style.display = 'inline'; _CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight); }); });

View demo

0
source

More articles:


All Articles