| 标题 | html5播放视频且动态截图实现步骤与代码(支持safari其他未测试) |
| 范文 | html5播放视频且动态截图，很时尚且炫酷的一项功能，暂不支持chrom ，支持safari其他未测试，有需要了解的朋友可以适当参考下 暂不支持chrom 。支持safari .其他未测试 先引用 jquery 地址。选用新浪的 代码如下: <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js"></script> 加一个video标签 代码如下: <video id="video" controls="controls"> <source src="1.mp4" /> </video> 然后js 代码如下: <script type="text/javascript"> $().ready(function(){ var video, output; var scale = 0.25; var initialize = function() { output = $("#output"); video = $("#video").get(0); $("#capture").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(); output.prepend(img); }; $(initialize); }); </script> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。