taking screenshots from video element (even flash fallback)

by Anov Siradj

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="player">
    <button class="load-swf" disabled="">test flash fallback</button>
    <hr />
    <div class="screenshot-wrapper">
        <div class="mediaplayer">
            <video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
                <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
                <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
            </video>
        </div>
        <button type="button" disabled="" class="screenshot-btn">take a photo</button>
        <div class="canvas-holder">
            <canvas></canvas>
        </div>
    </div>
    <hr />
    <p><a href="http://afarkas.github.io/webshim/demos/index.html#Media-elements">webshims mediaelement documentation</a>

    </p>

CSS

.player {
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 900px;
    min-width: 320px;
}
.mediaplayer, .canvas-holder {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video, .canvas-holder canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

JavaScript

webshim.setOptions('mediaelement', {
    replaceUI: 'auto'
});
webshim.setOptions({
    canvas: {
        type: 'flashpro'
    },
    mediaelement: {
        replaceUI: 'auto'
    }
});
webshim.polyfill('mediaelement canvas');

$(function () {
    $('.screenshot-wrapper').each(function () {
        var $module = $(this);
        var context = $('canvas', $module).getContext('2d');
        var $video = $('video', $module);

        function takeScreenshot() {
            context.drawImage($video[0], 0, 0);
        }

        $('.screenshot-btn', $module).on('click', takeScreenshot);
        $video.on('loadedmetadata', function () {
            $('canvas', $module).attr({
                width: $.prop(this, 'videoWidth'),
                height: $.prop(this, 'videoHeight')
            });
            $('.screenshot-btn', $module).prop('disabled', false);
        });
    });
});

//add remove/flashbutton
$(function () {
    if (webshim.support.mediaelement && swfmini.hasFlashPlayerVersion('10.3')) {
        $('button.load-swf')
            .prop('disabled', false)
            .one('click', function () {
            webshim.setOptions('mediaelement', {
                preferFlash: true
            });
            $('video').mediaLoad();
            $(this).prop('disabled', true);
        });
    } else {
        $('button.load-swf').remove();
    }
});