Canvas生成视频图片

css

 <style>
        body {
            background: black;
            color:#CCCCCC;
        }
        .video {
            float: left;
            border :1px solid #444444;
            padding:10px;
            margin: 10px;
            background:#3B3B3B;
        }
        .load-container{padding-top:<{$info.height/2-50}>px;text-align:center;}
        .loader{display:inline-block;font-size:30px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:0.8em auto;position:relative;-webkit-animation:load 1.7s infinite ease;animation:load 2s infinite ease;}
        @-webkit-keyframes load{
            0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
            5%,
            95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em #a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
            30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
            55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
            100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
        }
        @keyframes load{
            0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
            5%,
            95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em #a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
            30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
            55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
            100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
        }
    </style>

script

<script>
        var count = 0
        var time = [];
        var processor = {
            timerCallback: function() {
                if (this.video.paused || this.video.ended) {
                    return;
                }
                this.computeFrame();
                var self = this;
                setTimeout(function () {
                    self.timerCallback();
                }, 1000);
            },

            doLoad: function() {
                this.video = document.getElementById("video");
                self = this;
                this.video.playbackRate = 4;//播放速度4x
                this.video.addEventListener("play", function(e) {
                    self.computeFrame();
                    time.push(count)
                    console.log('视频开始')
                }, false);
                this.video.addEventListener('ended', function(e) {
                    console.log('视频播放完了')
                    self.video.playbackRate = 1;
                    self.video.width='<{$info.width}>';
                    var box = document.getElementById("load-container");
                    box.parentNode.removeChild(box);
                });
                this.video.ontimeupdate=function(){
                    count = parseInt(self.video.currentTime);
                    if(time.indexOf(count) == -1){
                        self.computeFrame();
                        time.push(count)
                    }
                };
                this.video.addEventListener('seeked', function(e) {
                    console.log('进度条移动到了00:'+(Array(2).join(0) + count).slice(-2))
                    self.computeFrame();
                })
            },

            computeFrame: function() {
                console.log("c"+count);
                document.getElementById("c"+count).getContext("2d").drawImage(this.video, 0, 0, '400', '500');
                return;
            }
        };
    </script>

html

    <body onload="processor.doLoad()">
<div style="width:400px;height:500px;position:fixed;top:10%;" id="video_div" class="video">
    <div class="load-container" id="load-container"><div class="loader"></div></div>
    <video id="video" src="" autoplay="autoplay"  controls="true" muted="muted" preload="auto" width="0"/>
</div>
<div style="margin-left: 450px;width: 70%;" class="video">
    <canvas id="c0" width="400" height="500"/></canvas>
    <canvas id="c1" width="400" height="500"/></canvas>
</div>

</body>