初始化截图工具

docs/thumbnail/js/common.js

@@ -1 +1,64 @@
-var thumbnail = new ArtplayerToolThumbnail('.artplayer-tool-thumbnail');
+(function() {
+    var $upload = document.querySelector('.upload');
+    var $file = document.querySelector('.file');
+    var $artplayer = document.querySelector('.artplayer');
+    var $aspectRatio = document.querySelector('.aspectRatio');
+    var $duration = document.querySelector('.duration');
+    var $number = document.querySelector('.number');
+    var $width = document.querySelector('.width');
+    var $height = document.querySelector('.height');
+    var $column = document.querySelector('.column');
+
+    var thumbnail = new ArtplayerToolThumbnail({
+        fileInput: $file,
+        callbackVideoUrl: function(url) {
+            $upload.style.display = 'none';
+            $artplayer.style.display = 'block';
+            restartArtplayer();
+        },
+        callbackThumbnailUrl: function (url) {
+            console.log(url);
+        }
+    });
+
+    function restartArtplayer() {
+        var number = Number($number.value);
+        var width = Number($width.value);
+        var height = Number($height.value);
+        var column = Number($column.value);
+
+        Artplayer.instances.forEach(function(art) {
+            art.destroy(true);
+        });
+
+        var option = {
+            container: $artplayer,
+            url: thumbnail.videoUrl
+        };
+
+        if (thumbnail.thumbnailUrl) {
+            option.thumbnails = {
+                url: thumbnail.thumbnailUrl,
+                number: number,
+                width: width,
+                height: height,
+                column: column,
+            }
+        }
+
+        var art = new Artplayer(option);
+
+        art.on('firstCanplay', function() {
+            var $video = art.template.$video;
+            $aspectRatio.textContent = $video.videoWidth + ' x ' + $video.videoHeight;
+            $duration.textContent = $video.duration + 's';
+            thumbnail.setup({
+                videoElement: $video,
+                number: number,
+                width: width,
+                height: height,
+                column: column,
+            });
+        });
+    }
+})();