如何在没有Jquery的情况下将HTML5视频快照附加到滚动DIV

Question

如何从本地播放的HTML5视频中拍摄多个快照（通过onclick按钮），并将带有时间戳的快照图像添加到没有jQuery或外部库的可滚动div中？

我可以通过画布制作快照但是如何将画布图像转换为小文件大小格式并将图像（带有href =“”scrpt）附加到滚动div？

codepine示例http://codepen.io/anon/pen/OVGZEg

HTML

<span> Working example</span>
<br>


<video controls id="sourceVid">
    <source src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
    <source src="../media/elephants-dream-medium.webm" type="video/webm">
</video>
<canvas></canvas>
<br>
    <button id="snap" onclick="snap()">Take Snapshot</button>
<br>
<br>
    <br>
<!----------------------------------------
Desired Result
---------------------------------------->
<div id="DesiredResult" style="background-color:grey;width: 100%;">
<br>
Desired Result
<br>
    How can I take a snapshot & add it to scrolling DIV on the left?
    <br>
<video controls id="Result" style="float: left;" >
        <source src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
        <source src="../media/elephants-dream-medium.webm" type="video/webm">
    </video>
<div id="snapshotscroll" >

<div id="snapshot#1" class="snapshots" style="background-color:#FE2E2E;" >
    snapshot image
    <br>#1
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#FA5858;" >
    snapshot image
    <br>#2
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F78181;" >
    snapshot image
    <br>#3   
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F5A9A9;" >
    snapshot image
    <br>#4   
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F6CECE;" >
    snapshot image
    <br>#5   
    </div>
</div>
</div>
        <button id="snap" onclick="alert('How can I take a snapshot & add it to scrolling DIV on the left?')">Take Snapshot</button>


CSS

video, canvas {
    border:1px solid #000;
}
#snapshotscroll {
overflow-y: scroll;
height:258px;
width:220px;
}
.snapshots {
width: 200px;
height: 100px;
border: 1px solid #000;
}

JAVASCRIPT



        // Get handles on the video and canvas elements
        var video = document.getElementById('sourceVid');
        var canvas = document.querySelector('canvas');
        // Get a handle on the 2d context of the canvas element
        var context = canvas.getContext('2d');
        // Define some vars required later
        var w, h, ratio;

        // Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
        video.addEventListener('loadedmetadata', function() {
            // Calculate the ratio of the video's width to height
            ratio = video.videoWidth / video.videoHeight;
            // Define the required width as 100 pixels smaller than the actual video's width
            w = 200;
            // Calculate the height based on the video's width and the ratio
            h = 100;
            // Set the canvas width and height to the values just calculated
            canvas.width = w;
            canvas.height = h;          
        }, false);

        // Takes a snapshot of the video
        function snap() {
            // Define the size of the rectangle that will be filled (basically the entire element)
            context.fillRect(0, 0, w, h);
            // Grab the image from the video
            context.drawImage(video, 0, 0, w, h);
        }