来源:自学PHP网 时间:2015-01-26 11:14 作者: 阅读:次
[导读] html5播放视频且动态截图,很时尚且炫酷的一项功能,暂不支持chrom ,支持safari其他未测试,有需要了解的朋友可以适当参考下...
html5播放视频且动态截图,很时尚且炫酷的一项功能,暂不支持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> 效果图就不贴了。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com