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

2016-02-19 12:17 118 1 收藏

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

【 tulaoshi.com - Web开发 】

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

效果图就不贴了。

来源:https://www.tulaoshi.com/n/20160219/1600495.html

延伸阅读
标签: Web开发
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y) 图示如下:   任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示: 代码如下: // trans...
标签: Web开发
这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服务端语言。让我们看面这个片断的HTML: 复制代码代码如下: @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"})) { div class="row" label for="file" Upload Image:/label input type="file" name="fileToUploa...
标签: Web开发
  代码如下: html head meta charset=utf-8 title跳跳球/title script //box var box_x=0; var box_y=0; var box_width=300; var box_height=300; //注意:定位球采用球的中心 var ball_x=10; var ball_y=10; var ball_radius=10; var ball_vx=5; var ball_vy=3; var box_bound_left=box_x+ball_radius; var box_boun...
标签: Web开发
作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。在这篇文章中,我收集了7个很棒的HTML5视频播放器,你可以很容易的应用到你的网站 中,文章最后还将与大家分享使用 CSS3 和 jQuery 开发一个自定义 HTML5 视频播放器的教程。 VideoJS Video...
标签: Web开发
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个: 1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。 针对IE比较好的解决方案是ht...

经验教程

357

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部