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自定义滚动条样式的示例代码
Aug 21 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 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
php之字符串变相相减的代码
2007/03/19 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
啤酒节策划方案
2014/05/28 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
老人院义工活动感想
2015/08/07 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技