html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)


Posted in HTML / CSS onJanuary 06, 2013

暂不支持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>

效果图就不贴了。
HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 #HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 #HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 #HTML / CSS
html5的新玩法——语音搜索
Jan 03 #HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 #HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
You might like
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
nginx 设置多个站跨域
2021/03/09 Servers
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python使用mysql的两种使用方式
2018/03/07 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python可以用哪些数据库
2020/06/22 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
出生公证书样本
2014/04/04 职场文书
心理健康活动总结
2014/04/30 职场文书
环保专项行动方案
2014/05/12 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书