Get video first frame in javascript

问题

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

回答1:

It can be done with 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

回答2:

Just add the video tag to the page with no controls and no auto-play.

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

Drawback is that users can play the video by right clicking the thumbnail and selecting "play" in the context-menu. To avoid that you'd need a little javascript listening for click events and cancelling them (removing context-menu from thumbnails).

回答3:

Javascript is not capable of doing this.

回答4:

As mentioned, Javascript is not able to do this.

If you want to create thumbnails for your videos you have to create the thumbnail server side and then simply serve up the image on the client as you would any other image.

My method of choice for accomplishing this is the ffmpeg decoder. It can handle a multitude of file formats and is able to do what you want. So if you have a video named hello.avi, you might 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 (fixing the paths and dimensions...) with whatever server-side language you are using and it would create a thumbnail of the video file.

回答5:

It may be possible if the video is a file selected by the user into an <input type="file">, you can get the base-64 video data using the FileReader API:

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

From there you're just left with the extremely intractable problem of decoding the video and somehow picking out and rendering a single frame, in javascript. Alternatively, you could just include the entire video as the "thumbnail preview" (I assume that's why you're doing this?), as demonstrated here:

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

Not sure about the compatability of that last example though, or how well it work with larger video files (I hear you can easily bump up against URL length restrictions)

来源：https://stackoverflow.com/questions/1158759/get-video-first-frame-in-javascript

标签

javascript

thumbnails