创建gif动画插件Gifshot

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

 11122  28  查看评论 (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);
    }
});


相关插件-音频和视频

使用h5 audio做的一个音频播放器

上下曲目切换歌单列表歌曲进度调节音量调节
  音频和视频
 3442  32

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 22927  149

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

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

音乐播放器

音乐播放器插件
  音频和视频
 10484  51

讨论这个项目(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创建不了啊 回复
取消回复