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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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)
2010/09/04 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中的闭包实例详解
2014/08/29 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
司法建议书范文
2014/05/13 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
给老师的感谢信
2015/01/20 职场文书
中班上学期个人总结
2015/02/12 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python