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

少杀颜

少杀颜

2016-02-19 12:17

下面,图老师小编带您去了解一下html5播放视频且动态截图实现步骤与代码(支持safari其他未测试),生活就是不断的发现新事物,get新技能~
暂不支持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

效果图就不贴了。
展开更多 50%)
分享

猜你喜欢

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

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

HTML5视频支持检测(检查浏览器是否支持视频播放)

Web开发
HTML5视频支持检测(检查浏览器是否支持视频播放)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5中如何显示视频呢 HTML5视频播放demo

Web开发
HTML5中如何显示视频呢 HTML5视频播放demo

检测浏览器是否支持html5视频的代码

Web开发
检测浏览器是否支持html5视频的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5 MiranaVideo播放器 (代码开源)

Web开发
HTML5 MiranaVideo播放器 (代码开源)

html5时钟实现代码

Web开发
html5时钟实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C#Web应用程序入门经典学习笔记之二

C#Web应用程序入门经典学习笔记之二

html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
下拉加载更多内容 ↓