欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 媒体播放

创建gif动画插件Gifshot

所属栏目:媒体播放更新时间:2016-08-21原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


注:本地chrome浏览器下有跨域问题,可用ff或ie10以上浏览器本地查看,上专服务器chrome可正常查看


gifshot使用以下技术:

webRTC getUserMedia()API来获得许可使用用户的网络摄像头和操纵CameraStream媒体对象

HTML5处理临时blob URL创建文件系统api

HTML5视频元素流blob的URL

canvas API来创建一个动态的图像从一个HTML5视频或图像

Web workers处理GIF帧

处理二进制图像数据类型的数组

Base 64编码字符串创建一个Base 64编码的图像


浏览器支持

Firefox 17+, Chrome 21+, Opera 18+, Blackberry Browser 10+, Opera Mobile 12+, Chrome For Android 35+, Firefox for Android 29+

动画GIF从现有的视频:

所有现代浏览器(ie 10 +)

从现有动画GIF图片:

所有现代浏览器(ie 10 +)



快速启动

包括gifshot HTML页面(gifshot.js构建目录中可以找到)

<script src='gifshot.js'></script>

开始使用JavaScript API来创建动画gif

// By default, a user's webcam is used to create the animated GIFgifshot.createGIF({}, function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

例子

网络摄像头

gifshot.createGIF(function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

HTML5 Video

gifshot.createGIF({
    'video': ['example.mp4', 'example.ogv']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

Images

gifshot.createGIF({
    'images': ['http://i.imgur.com/2OO33vX.jpg', 'http://i.imgur.com/qOwVaSN.png', 'http://i.imgur.com/Vo5mFZJ.gif']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

快照技术

gifshot.takeSnapShot(function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1网页实用最简单的flash mp3播放器代码-多样式

2jquery点击缩略图切换视频播放选项卡代码

3jQuery网页跨平台媒体播放器

4基于html5的视频播放器不依赖任何插件

5扁平html5音乐播放器代码

6程序员表白神器

7jQuery仿微信公众号的语音框插件-weixinAudio.js

8Html5实现的3D音乐频谱

9HTML5,CSS3,jQuery自制video播放器

10焦点图风格动态Flash视频播放器代码

最新更新的

1多视频无刷新切换播放JS代码

2jQuery仿微信公众号的语音框插件-weixinAudio.js

3基于html5的视频播放器不依赖任何插件

5jQuery歌词同步MP3播放器代码

6jQuery流媒体音乐播放器特效

7影院座位角度预览

8jQuery视屏画廊插件blueimp Gallery

9视频播放插件Video.js

10蓝水晶音乐播放器