初始化截图工具

docs/thumbnail/css/common.css

@@ -0,0 +1,147 @@
+html, body {
+    height: 100%;
+}
+
+::-webkit-input-placeholder {
+    color:#dadada;
+}
+:-moz-placeholder {
+    color:#dadada;
+}
+::-moz-placeholder {
+    color:#dadada;
+}
+:-ms-input-placeholder {
+    color:#dadada;
+}
+
+.container {
+    height: 100%;
+    display: flex;
+    font-size: 14px;
+    color: #97a8be;
+}
+
+.left-part {
+    width: 40%;
+    flex-direction: column;
+    border-right: 1px solid #ddd;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.left-part .upload {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    border: 2px dashed #d9d9d9;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 3px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.left-part .upload .file {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    outline: none;
+    opacity: 0;
+}
+
+.left-part .artplayer {
+    display: none;
+    height: 300px;
+    margin-bottom: 10px;
+}
+
+.left-part .result {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 10px;
+}
+
+.left-part .result .item {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-right: 20px;
+}
+
+.left-part .result .item .name{
+    width: 50px;
+}
+
+.left-part .setup {
+    margin-bottom: 10px;
+}
+
+.left-part .setup .item {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 20px;
+}
+
+.left-part .setup .item .name{
+    width: 50px;
+}
+
+.left-part .setup .item .input {
+    height: 30px;
+    width: 200px;
+    border-radius: 3px;
+    outline: none;
+    color: #687079;
+    border: 1px solid #d9d9d9;
+    padding: 0 10px;
+}
+
+.left-part .btns {
+    display: flex;
+}
+
+.left-part .btns .btn {
+    width: 120px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    border-radius: 3px;
+    margin-right: 20px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.left-part .btns .btn.reset {
+    background: #97a8be;
+}
+
+.left-part .btns .btn.download {
+    background: #3ca5ea;
+}
+
+.left-part .btns .btn:hover {
+    opacity: .8;
+}
+
+.rigth-part {
+    flex: 1;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.rigth-part .img {
+    width: 100%;
+    height: 100%;
+    border: 2px dashed #d9d9d9;
+    background-color: #f5f5f5;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+}

docs/thumbnail/index.html

@@ -17,7 +17,48 @@
 
 <body>
     <div class="container">
-        <div class="artplayer-tool-thumbnail"></div>
+        <div class="left-part">
+            <div class="upload">
+                点击上传视频文件, 支持格式：mp4、ogg、webm
+                <input class="file" type="file">
+            </div>
+            <div class="artplayer"></div>
+            <div class="result">
+                <div class="item">
+                    <div class="name">长宽：</div>
+                    <span class="aspectRatio">0 x 0</span>
+                </div>
+                <div class="item">
+                    <div class="name">时长：</div>
+                    <span class="duration">0s</span>
+                </div>
+            </div>
+            <div class="setup">
+                <div class="item">
+                    <div class="name">数量：</div>
+                    <input class="input number" type="number" min="10" max="100" placeholder="10 - 100" value="100">
+                </div>
+                <div class="item">
+                    <div class="name">宽度：</div>
+                    <input class="input width" type="number" min="10" max="100" placeholder="100 - 500" value="100">
+                </div>
+                <div class="item">
+                    <div class="name">高度：</div>
+                    <input class="input height" type="number" min="10" max="100" placeholder="100 - 500" value="100">
+                </div>
+                <div class="item">
+                    <div class="name">纵数：</div>
+                    <input class="input column" type="number" min="10" max="100" placeholder="10 - 100" value="10">
+                </div>
+            </div>
+            <div class="btns">
+                <div class="btn reset">重置</div>
+                <div class="btn download">下载</div>
+            </div>
+        </div>
+        <div class="rigth-part">
+            <div class="img"></div>
+        </div>
     </div>
     <script src="../uncompiled/artplayer.js"></script>
     <script src="../uncompiled/artplayer-tool-thumbnail.js"></script>

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,
+            });
+        });
+    }
+})();