How to take youtube screenshot

问题

<script src="jquery.js"></script>
<video id="video" controls preload="none" width="640" poster="http://media.w3.org/2010/05/sintel/poster.png" onloadedmetadata="$(this).trigger('video_really_ready')">
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
    <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
    <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>
<br />

<input type="button" id="capture" value="Capture" /> Press play, and then start capturing
<div id="screen"></div>
<script>
var VideoSnapper = {

    /**
     * Capture screen as canvas
     * @param {HTMLElement} video element 
     * @param {Object} options = width of screen, height of screen, time to seek
     * @param {Function} handle function with canvas element in param
     */
    captureAsCanvas: function(video, options, handle) {

        // Create canvas and call handle function
        var callback = function() {
            // Create canvas
            var canvas = $('<canvas />').attr({
                width: options.width,
                height: options.height
            })[0];
            // Get context and draw screen on it
            canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
            // Seek video back if we have previous position 
            if (prevPos) {
                // Unbind seeked event - against loop
                $(video).unbind('seeked');
                // Seek video to previous position
                video.currentTime = prevPos;
            }
            // Call handle function (because of event)
            handle.call(this, canvas);    
        }

        // If we have time in options 
        if (options.time && !isNaN(parseInt(options.time))) {
            // Save previous (current) video position
            var prevPos = video.currentTime;
            // Seek to any other time
            video.currentTime = options.time;
            // Wait for seeked event
            $(video).bind('seeked', callback);              
            return;
        }

        // Otherwise callback with video context - just for compatibility with calling in the seeked event
        return callback.apply(video);
    }
};

$(function() {

    $('video').bind('video_really_ready', function() {
        var video = this;
        $('input').click(function() {
            var canvases = $('canvas');
            VideoSnapper.captureAsCanvas(video, { width: 160, height: 68, time: 40 }, function(canvas) {
                $('#screen').append(canvas);                         
                if (canvases.length == 4) 
                    canvases.eq(0).remove();     
            })
        }); 
    });

});
</script>

How can I add youtube video instead. Could not play youtube video in video tag. embed tag is working to play youtube video. How to take screenshot by placing youtube video inside embed tag. Please help me

回答1:

I could solve this with ffmpeg.

Just run

ffmpeg -i inputfile.avi  -r 1 -t 1 -ss  00:00:03 image-%d.jpeg

where

• -i inputfile.avi - input file
• -r 1 - one frame per second
• -t 1 - how many seconds should be converted to images
• -ss 00:00:03 - from what second to start
• image-%d.jpeg - resulting filename template

Found here http://linuxers.org/tutorial/how-extract-images-video-using-ffmpeg

回答2:

If manually set up image this might be help you.

Try add poster="placeholder.png" //photo you want to the video tag.

example

<video width="470" height="255" poster="placeholder.png" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   <source src="video.webm" type="video/webm">
   <object data="video.mp4" width="470" height="255">
   <embed src="video.swf" width="470" height="255">
   </object>
</video>

来源：https://stackoverflow.com/questions/26603618/how-to-take-youtube-screenshot