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 相关文章推荐
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
详解python程序中的多任务
2020/09/16 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
中学校园广播稿
2015/08/18 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
人力资源部工作计划
2019/05/14 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电