创建gif动画插件Gifshot

所属分类:媒体-音频和视频

 8867  25  查看评论 (4)
创建gif动画插件Gifshot ie兼容11

注:本地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 GIF
gifshot.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);
    }
});


相关插件-音频和视频

js音频插件audio.js

audiojs javascript库,允许HTML5的 audio标签,用于任何地方。
  音频和视频
 4731  27

html5云特效背景音乐网站模板

html5动态特效背景,带播放器
  音频和视频
 9892  156

jQuery HTML5音频视频库-jPlayer

jPlayer是完全自由和开放源码(MIT)用JavaScript编写的媒体库。一个jQuery的插件,(而现在的Zepto插件,) jPlayer可以让你快速编织跨平台的音频和视频到您的网页。jPlayer的全面的API允许你创建创新媒体解决方案。
  音频和视频
 17894  48

时间播放器

类似视频播放器下面的时间播放控制
  音频和视频
 8517  18

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    重新连接 0
    2016/7/11 17:07:33
    chuang jian bu l  zen mo shi yong 回复
    (_L.nメ° 0
    2016/6/18 14:06:43
    Kitty.のバガ 0
    2016/4/21 9:04:47
    chrome创建不了啊 回复
取消回复
    PROMULGATOR

    西瓜

    上海市松江区