网页js获取视频帧图片

来源：互联网发布：淘宝什么是千人千面编辑：程序博客网时间：2024/05/16 04:33

之前有过用优酷，我记得上传视频之后可以选择其中的一个帧做为视频的封面图片，当我们真正需要这样的功能时，我在优酷上开放平台上却没有发现相关的接口可以使用了。不过呢，好在有HTML5，而HTML5中最为强大的画布能提供强大的处理功能。代码功能实现如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>capture screen</title></head><body><video id="video" controls="controls">    <source src="../../assets/img/vedio/tomandjerry.mkv"></video><div id="output"></div><script type="text/javascript">    (function(){        var video, output;        var scale = 0.3;        var initialize = function() {            output = document.getElementById("output");            video = document.getElementById("video");            video.addEventListener('click',captureImage);        };        var captureImage = function() {            var canvas = document.createElement("canvas");            canvas.width = video.videoWidth * scale;            canvas.height = video.videoHeight * scale;            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);            var img = document.createElement("img");            img.src = canvas.toDataURL("image/png");            output.appendChild(img);        };        initialize();    })();</script></body></html>

效果如下：

不要问我怎么想到的，因为我也是网上借鉴别人代码的。

阅读全文

0 0