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

Question

我如何从本地播放的 HTML5 视频拍摄多个快照（通过点击按钮），并将带有时间戳的快照图像添加到可滚动 div 而无需 jQuery 或外部图书馆？

我可以通过 canvas 制作快照，但如何将 canvas 图像转换为小文件格式并附加图像（使用 href="" 脚本）滚动 div?

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);
        }

Answer 1

我最终通过一些调整让您的示例正常工作。此示例使用计数器来跟踪要将快照附加到哪个 div。

实时工作示例（全屏）：

var w = 200, h = 100, snapnum = 1;

// Takes a snapshot of the video
function snap() {
    var cv = document.createElement("canvas");
    cv.width = w;
    cv.height = h;
    console.log(document.getElementById("snapshot#" + snapnum));
    document.getElementById("snapshot#" + snapnum).textContent = "";
    document.getElementById("snapshot#" + snapnum).appendChild(cv);
    var cx = cv.getContext('2d');
    cx.fillRect(0, 0, w, h);
    // Grab the image from the video
    cx.drawImage(document.getElementById('Result'), 0, 0, w, h);
    snapnum++;
}

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

<!---------------------------------------- Desired Result ---------------------------------------->
<div id="DesiredResult" style="background-color:grey;width: 100%;">
    <br>Desired Result
    <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#2" class="snapshots" style="background-color:#FA5858;">snapshot image
            <br>#2</div>
        <div id="snapshot#3" class="snapshots" style="background-color:#F78181;">snapshot image
            <br>#3</div>
        <div id="snapshot#4" class="snapshots" style="background-color:#F5A9A9;">snapshot image
            <br>#4</div>
        <div id="snapshot#5" class="snapshots" style="background-color:#F6CECE;">snapshot image
            <br>#5</div>
    </div>
</div>
<button id="snap" onclick="snap()">Take Snapshot</button>

JSFiddle 版本：https://jsfiddle.net/y80m3z33/

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

How to append HTML5 video snapshots to a scrolling DIV without Jquery

javascript

html5-video

html5-canvas