Javascript 获取视频帧作为图像_Javascript_Canvas_Html5 Canvas_Html5 Video

Javascript 获取视频帧作为图像

javascript canvas html5-canvas

Javascript 获取视频帧作为图像,javascript,canvas,html5-canvas,html5-video,Javascript,Canvas,Html5 Canvas,Html5 Video,我正在尝试从视频中获取视频帧作为图像。I“”并且我的应用程序正在localhost:3000上运行。下面是我从视频中获取图像的代码 <!DOCTYPE html> <html> <body> <video width="400" controls> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> Yo

我正在尝试从视频中获取视频帧作为图像。I“”并且我的应用程序正在localhost:3000上运行。下面是我从视频中获取图像的代码

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path, secs, callback) {
        var me = this, video = document.createElement('video');
        video.onloadedmetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me, img, this.currentTime, e);
        };
        video.onerror = function(e) {
            callback.call(me, undefined, undefined, e);
        };
        video.src = path;
    }
    function showImageAt(secs) {
        var duration;
        getVideoImage(
            "http://techslides.com/demos/sample-videos/small.mp4",
            function(totalTime) {
                duration = totalTime;
                return secs;
            },
            function(img, secs, event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                        showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>


</body>
</html>
view raw

这意味着我的视频源和网页不在同一个域中。我怎样才能让它工作

另外，您可以将我的代码粘贴到

视频中，以试用我的代码

将此粘贴到您要求的页面（）上，它将起作用

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path, secs, callback) {
        var me = this, video = document.createElement('video');
        video.onloadedmetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me, img, this.currentTime, e);
        };
        video.onerror = function(e) {
            callback.call(me, undefined, undefined, e);
        };
        video.src = path;
    }
    function showImageAt(secs) {
        var duration;
        getVideoImage(
            "mov_bbb.mp4",
            function(totalTime) {
                duration = totalTime;
                return secs;
            },
            function(img, secs, event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                        showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>


</body>
</html>
view raw


您的浏览器不支持HTML5视频。
以下是getVideoImage（）生成的帧图像：
函数getVideoImage（路径、秒、回调）{
var me=this，video=document.createElement（'video'）；
video.onloadedmetadata=函数（）{
if（'函数'==秒的类型）{
秒=秒（此持续时间）；
}
this.currentTime=Math.min（Math.max（0，（秒<0？this.duration:0）+秒），this.duration）；
};
video.onseek=函数（e）{
var canvas=document.createElement（'canvas'）；
canvas.height=video.videoHeight；
canvas.width=video.videoWidth；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（视频，0，0，canvas.width，canvas.height）；
var img=新图像（）；
img.src=canvas.toDataURL（）；
callback.call（me，img，this.currentTime，e）；
};
video.onerror=函数（e）{
callback.call（me，未定义，未定义，e）；
};
video.src=路径；
}
函数showImageAt（秒）{
var持续时间；
获取视频图像(
“mov_bbb.mp4”，
函数（总时间）{
持续时间=总时间；
返回秒数；
},
功能（img、secs、事件）{
如果（event.type==“seek”）{
var li=document.createElement（'li'）；
li.innerHTML+='第二帧'+secs+'：
；
李.儿童（img）；
document.getElementById（'olFrames'）.appendChild（li）；
如果（持续时间>=++秒）{
showImageAt（秒）；
};
}
}
);
}
showmageat（0）；
原始视图

通常我使用Apache作为代理来解决所有CORS问题。如何做到这一点？请看一下->请仔细阅读接受的答案，这是从视频爆米花中提取图像的一种更简单的方法。js在其代码中还使用canvas.toDataUrl。它将给出同样的问题。看看他们的git代码

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path, secs, callback) {
        var me = this, video = document.createElement('video');
        video.onloadedmetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me, img, this.currentTime, e);
        };
        video.onerror = function(e) {
            callback.call(me, undefined, undefined, e);
        };
        video.src = path;
    }
    function showImageAt(secs) {
        var duration;
        getVideoImage(
            "mov_bbb.mp4",
            function(totalTime) {
                duration = totalTime;
                return secs;
            },
            function(img, secs, event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                        showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>


</body>
</html>
view raw