html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
发布时间：2013-01-06 09:55:13 作者：佚名 
我要评论
我要评论html5播放视频且动态截图，很时尚且炫酷的一项功能，暂不支持chrom ，支持safari其他未测试，有需要了解的朋友可以适当参考下
暂不支持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>
效果图就不贴了。
先引用 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>
效果图就不贴了。
相关文章
- 这篇文章主要给大家总结介绍了关于HTML5中视频音频的使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
- 本篇文章主要介绍了HTML5+CSS3模仿优酷视频截图功能示例，在用户上传完成后，可以对播放的视频进行截图，非常具有实用价值，需要的朋友可以参考下。2017-01-05
- 本篇文章主要介绍了canvas与html5实现视频截图功能示例，非常具有实用价值，需要的朋友可以参考下。2016-12-15
- 这里主要研究的是通过应用html5来解决视频播放的问题。Adobe公司因为战略错误，忽视了移动互联这块，移动终端对flash支持并不好，特别是苹果终端都不支持flash（苹果电脑和2016-11-06
- 现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法2016-10-20
- 下面小编就为大家带来一篇浅谈Html5中视频 音频标签 进度条的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-26
- 这篇文章主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法,2016-02-22
- 这篇文章主要介绍了基于HTML5的在线视频播放方案,讨论了编码和浏览器支持等相关方面的问题,需要的朋友可以参考下2016-02-18
- 这篇文章主要介绍了HTML5中的音频和视频媒体播放元素小结,是网站页面多媒体开发的基础知识,需要的朋友可以参考下2016-01-29
- 这篇文章主要介绍了用HTML5制作视频拼图的教程,主要用到了HTML5的Canvas API,需要的朋友可以参考下2015-05-13
最新评论