diff --git a/docs/gif/css/common.css b/docs/gif/css/common.css
index 762079507..e2f381fe0 100644
--- a/docs/gif/css/common.css
+++ b/docs/gif/css/common.css
@@ -11,17 +11,43 @@ body,
 
 .part-top {
     display: flex;
-    align-items: center;
-    justify-content: center;
     height: 70%;
 }
 
-.part-top .artplayer {
-    width: 500px;
-    height: 500px;
-}
-
 .part-bottom {
     position: relative;
     height: 30%;
 }
+
+.part-left {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-left .artplayer {
+    width: 500px;
+    height: 500px;
+    background: #fff;
+}
+
+.part-right .preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 500px;
+    height: 500px;
+    background: #f3f3f3;
+}
+
+.part-right .preview img {
+    max-width: 100%;
+}
diff --git a/docs/gif/index.html b/docs/gif/index.html
index f379c148e..25c172ab0 100644
--- a/docs/gif/index.html
+++ b/docs/gif/index.html
@@ -18,7 +18,12 @@
 <body>
     <div class="container">
         <div class="part-top">
-            <div class="artplayer"></div>
+            <div class="part-left">
+                <div class="artplayer"></div>
+            </div>
+            <div class="part-right">
+                <div class="preview"></div>
+            </div>
         </div>
         <div class="part-bottom"></div>
     </div>
diff --git a/docs/gif/js/common.js b/docs/gif/js/common.js
index cc522d489..81a0cbc40 100644
--- a/docs/gif/js/common.js
+++ b/docs/gif/js/common.js
@@ -31,4 +31,10 @@
         ],
         plugins: [artplayerPluginGif]
     });
+
+    art.on('artplayerPluginGif', image => {
+        var animatedImage = document.createElement('img');
+        animatedImage.src = image;
+        document.querySelector('.preview').appendChild(animatedImage);
+    });
 })();
diff --git a/docs/uncompiled/artplayer-plugin-gif.js b/docs/uncompiled/artplayer-plugin-gif.js
index 63fa85a75..45508ac73 100644
--- a/docs/uncompiled/artplayer-plugin-gif.js
+++ b/docs/uncompiled/artplayer-plugin-gif.js
@@ -2724,7 +2724,7 @@
       'zh-cn': {
         'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
         'Gif time is too short': 'Gif 时间太短',
-        'Start creating gif, please wait': '开始创建 gif，请稍等',
+        'Start creating gif...': '开始创建 gif...',
         'Create gif successfully': '创建 gif 成功',
         'There is another gif in the processing': '正有另一个 gif 在创建中',
         'Release the mouse to start': '放开鼠标即可开始'
@@ -2732,7 +2732,7 @@
       'zh-tw': {
         'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
         'Gif time is too short': 'Gif 時間太短',
-        'Start creating gif, please wait': '開始創建 gif，請稍等',
+        'Start creating gif...': '開始創建 gif...',
         'Create gif successfully': '創建 gif 成功',
         'There is another gif in the processing': '正有另一個 gif 在創建中',
         'Release the mouse to start': '放開鼠標即可開始'
@@ -2744,12 +2744,14 @@
     var _art$constructor$util = art.constructor.utils,
         errorHandle = _art$constructor$util.errorHandle,
         clamp = _art$constructor$util.clamp,
-        downloadImage = _art$constructor$util.downloadImage;
+        downloadImage = _art$constructor$util.downloadImage,
+        sleep = _art$constructor$util.sleep;
     var i18n = art.i18n,
         notice = art.notice,
         layers = art.layers,
         controls = art.controls,
         player = art.player,
+        loading = art.loading,
         _art$option = art.option,
         theme = _art$option.theme,
         title = _art$option.title,
@@ -2773,6 +2775,7 @@
     var pressStartTime = 0;
     var progressTimer = null;
     var isPress = false;
+    var offset = 0;
 
     function cleanTimer() {
       $progress.style.width = '0%';
@@ -2794,10 +2797,13 @@
             videoHeight = $video.videoHeight;
         art.plugins.artplayerPluginGif.create({
           numFrames: numFrames,
+          offset: Math.floor(offset),
           gifHeight: 200,
           gifWidth: videoWidth / videoHeight * 200
         }, function (image) {
-          downloadImage(image, "".concat(title || 'unnamed', ".gif"));
+          sleep(100).then(function () {
+            downloadImage(image, "".concat(title || 'unnamed', ".gif"));
+          });
         });
       }
     }
@@ -2810,6 +2816,7 @@
         proxy($gif, 'mousedown', function () {
           isPress = true;
           cleanTimer();
+          offset = player.currentTime;
           pressStartTime = new Date();
           notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
 
@@ -2830,6 +2837,7 @@
           if (isPress) {
             isPress = false;
             createGif();
+            offset = 0;
           }
         });
       }
@@ -2841,11 +2849,13 @@
         var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var callback = arguments.length > 1 ? arguments[1] : undefined;
         isProcessing = true;
+        loading.show();
         art.emit('artplayerPluginGif:create:start');
-        notice.show("".concat(i18n.get('Start creating gif, please wait'), ": ").concat(config.numFrames / 10 || 1, " s"), false, 5000);
+        notice.show(i18n.get('Start creating gif...'), false, 5000);
+        console.log("Start time: ".concat(config.offset || 0, " s, Duration: ").concat(config.numFrames / 10 || 1));
         gifshot.createGIF(objectSpread({}, config, {
-          offset: player.currentTime,
-          video: [$video.src]
+          video: [$video.src],
+          crossOrigin: 'Anonymous'
         }), function (obj) {
           if (obj.error) {
             notice.show(obj.errorMsg);
@@ -2853,9 +2863,11 @@
           } else if (typeof callback === 'function') {
             callback(obj.image);
             notice.show(i18n.get('Create gif successfully'));
+            art.emit('artplayerPluginGif', obj.image);
           }
 
           isProcessing = false;
+          loading.hide();
           art.emit('artplayerPluginGif:create:end');
         });
       }
diff --git a/docs/uncompiled/artplayer.css b/docs/uncompiled/artplayer.css
index 48cb2939b..7a4267b72 100644
--- a/docs/uncompiled/artplayer.css
+++ b/docs/uncompiled/artplayer.css
@@ -1,6 +1,6 @@
-.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
 .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
 .artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
+.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
 .artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
 .artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
 .artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}
@@ -8,11 +8,11 @@
 .artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
 .artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
 .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
-.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
-.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
+.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
+.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
 .artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
-.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
 .artplayer-auto-size{display:flex;align-items:center;justify-content:center}
+.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
 button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:hover:after,[data-balloon][data-balloon-pos=down-left]:hover:before,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down-right]:after{right:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;right:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:hover:after,[data-balloon][data-balloon-pos=down-right]:hover:before,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=left]:after{margin-right:11px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;margin-right:5px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-pos=right]:after{left:100%;margin-left:11px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;left:100%;margin-left:5px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-length=small]:after{white-space:normal;width:80px}[data-balloon][data-balloon-length=medium]:after{white-space:normal;width:150px}[data-balloon][data-balloon-length=large]:after{white-space:normal;width:260px}[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:380px}@media screen and (max-width:768px){[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:90vw}}[data-balloon][data-balloon-length=fit]:after{white-space:normal;width:100%}
\ No newline at end of file
diff --git a/docs/uncompiled/artplayer.js b/docs/uncompiled/artplayer.js
index 05f20f192..e3f80a4bf 100644
--- a/docs/uncompiled/artplayer.js
+++ b/docs/uncompiled/artplayer.js
@@ -627,9 +627,11 @@
     setStyle(elink, 'display', 'none');
     elink.href = url;
     elink.download = name;
-    document.body.appendChild(elink);
-    elink.click();
-    document.body.removeChild(elink);
+    sleep(100).then(function () {
+      document.body.appendChild(elink);
+      elink.click();
+      document.body.removeChild(elink);
+    });
   }
 
   var utils = /*#__PURE__*/Object.freeze({
diff --git a/packages/artplayer-plugin-gif/src/index.js b/packages/artplayer-plugin-gif/src/index.js
index 423714d28..07394d36b 100644
--- a/packages/artplayer-plugin-gif/src/index.js
+++ b/packages/artplayer-plugin-gif/src/index.js
@@ -5,7 +5,7 @@ function i18nMix(i18n) {
         'zh-cn': {
             'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
             'Gif time is too short': 'Gif 时间太短',
-            'Start creating gif, please wait': '开始创建 gif，请稍等',
+            'Start creating gif...': '开始创建 gif...',
             'Create gif successfully': '创建 gif 成功',
             'There is another gif in the processing': '正有另一个 gif 在创建中',
             'Release the mouse to start': '放开鼠标即可开始',
@@ -13,7 +13,7 @@ function i18nMix(i18n) {
         'zh-tw': {
             'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
             'Gif time is too short': 'Gif 時間太短',
-            'Start creating gif, please wait': '開始創建 gif，請稍等',
+            'Start creating gif...': '開始創建 gif...',
             'Create gif successfully': '創建 gif 成功',
             'There is another gif in the processing': '正有另一個 gif 在創建中',
             'Release the mouse to start': '放開鼠標即可開始',
@@ -22,13 +22,14 @@ function i18nMix(i18n) {
 }
 
 function artplayerPluginGif(art) {
-    const { errorHandle, clamp, downloadImage } = art.constructor.utils;
+    const { errorHandle, clamp, downloadImage, sleep } = art.constructor.utils;
     const {
         i18n,
         notice,
         layers,
         controls,
         player,
+        loading,
         option: { theme, title },
         events: { proxy },
         template: { $video },
@@ -54,6 +55,7 @@ function artplayerPluginGif(art) {
     let pressStartTime = 0;
     let progressTimer = null;
     let isPress = false;
+    let offset = 0;
 
     function cleanTimer() {
         $progress.style.width = '0%';
@@ -74,11 +76,14 @@ function artplayerPluginGif(art) {
             art.plugins.artplayerPluginGif.create(
                 {
                     numFrames,
+                    offset: Math.floor(offset),
                     gifHeight: 200,
                     gifWidth: (videoWidth / videoHeight) * 200,
                 },
                 image => {
-                    downloadImage(image, `${title || 'unnamed'}.gif`);
+                    sleep(100).then(() => {
+                        downloadImage(image, `${title || 'unnamed'}.gif`);
+                    });
                 },
             );
         }
@@ -92,6 +97,7 @@ function artplayerPluginGif(art) {
             proxy($gif, 'mousedown', () => {
                 isPress = true;
                 cleanTimer();
+                offset = player.currentTime;
                 pressStartTime = new Date();
                 notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
                 (function loop() {
@@ -111,6 +117,7 @@ function artplayerPluginGif(art) {
                 if (isPress) {
                     isPress = false;
                     createGif();
+                    offset = 0;
                 }
             });
         },
@@ -121,13 +128,15 @@ function artplayerPluginGif(art) {
         isProcessing,
         create(config = {}, callback) {
             isProcessing = true;
+            loading.show();
             art.emit('artplayerPluginGif:create:start');
-            notice.show(`${i18n.get('Start creating gif, please wait')}: ${config.numFrames / 10 || 1} s`, false, 5000);
+            notice.show(i18n.get('Start creating gif...'), false, 5000);
+            console.log(`Start time: ${config.offset || 0} s, Duration: ${config.numFrames / 10 || 1}`);
             gifshot.createGIF(
                 {
                     ...config,
-                    offset: player.currentTime,
                     video: [$video.src],
+                    crossOrigin: 'Anonymous',
                 },
                 obj => {
                     if (obj.error) {
@@ -136,9 +145,11 @@ function artplayerPluginGif(art) {
                     } else if (typeof callback === 'function') {
                         callback(obj.image);
                         notice.show(i18n.get('Create gif successfully'));
+                        art.emit('artplayerPluginGif', obj.image);
                     }
 
                     isProcessing = false;
+                    loading.hide();
                     art.emit('artplayerPluginGif:create:end');
                 },
             );
diff --git a/packages/artplayer/src/utils/index.js b/packages/artplayer/src/utils/index.js
index 91ac2512d..a7d3b7492 100644
--- a/packages/artplayer/src/utils/index.js
+++ b/packages/artplayer/src/utils/index.js
@@ -176,7 +176,9 @@ export function downloadImage(url, name) {
     setStyle(elink, 'display', 'none');
     elink.href = url;
     elink.download = name;
-    document.body.appendChild(elink);
-    elink.click();
-    document.body.removeChild(elink);
+    sleep(100).then(() => {
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+    });
 }
\ No newline at end of file