初始化截图工具

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

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -4,6 +4,44 @@
   (factory((global['artplayer-tool-thumbnail'] = {})));
 }(this, (function (exports) { 'use strict';
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  var defineProperty = _defineProperty;
+
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
+
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        defineProperty(target, key, source[key]);
+      });
+    }
+
+    return target;
+  }
+
+  var objectSpread = _objectSpread;
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -12,12 +50,86 @@
 
   var classCallCheck = _classCallCheck;
 
-  var ArtplayerToolThumbnail = function ArtplayerToolThumbnail(el) {
-    classCallCheck(this, ArtplayerToolThumbnail);
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-    this.el = el;
-    console.log(this);
-  };
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  var createClass = _createClass;
+
+  function errorHandle(condition, msg) {
+    if (!condition) {
+      throw new Error(msg);
+    }
+  }
+
+  var ArtplayerToolThumbnail =
+  /*#__PURE__*/
+  function () {
+    function ArtplayerToolThumbnail(option) {
+      classCallCheck(this, ArtplayerToolThumbnail);
+
+      if (option.fileInput) {
+        errorHandle(option.fileInput.tagName === 'INPUT' && option.fileInput.type === 'file', 'This fileInput is not a file input');
+      }
+
+      if (option.videoElement) {
+        errorHandle(option.fileInput.tagName === 'VIDEO', 'This videoElement is not a video element');
+      }
+
+      if (option.callbackVideoUrl) {
+        errorHandle(typeof option.callbackVideoUrl === 'function', 'This callbackVideoUrl is not a function');
+      }
+
+      if (option.callbackThumbnailUrl) {
+        errorHandle(typeof option.callbackThumbnailUrl === 'function', 'This callbackThumbnailUrl is not a function');
+      }
+
+      this.option = option;
+      this.init();
+    }
+
+    createClass(ArtplayerToolThumbnail, [{
+      key: "init",
+      value: function init() {
+        var _this = this;
+
+        var fileType = ['video/mp4', 'video/ogg', 'video/webm'];
+        this.option.fileInput.addEventListener('change', function () {
+          var file = _this.option.fileInput.files[0];
+
+          if (file) {
+            errorHandle(fileType.includes(file.type), "Only file types are supported: ".concat(fileType.toString()));
+            var videoUrl = URL.createObjectURL(file);
+            _this.videoUrl = videoUrl;
+
+            if (_this.option.callbackVideoUrl) {
+              _this.option.callbackVideoUrl(videoUrl);
+            }
+          }
+        });
+      }
+    }, {
+      key: "setup",
+      value: function setup() {
+        var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        this.option = objectSpread({}, this.option, option);
+      }
+    }]);
+
+    return ArtplayerToolThumbnail;
+  }();
 
   window.ArtplayerToolThumbnail = ArtplayerToolThumbnail;
 

packages/artplayer-tool-thumbnail/src/index.js

@@ -1,11 +1,61 @@
 import './index.scss';
 
+function errorHandle(condition, msg) {
+    if (!condition) {
+        throw new Error(msg);
+    }
+}
+
 class ArtplayerToolThumbnail {
-    constructor(el) {
-        this.el = el;
-        console.log(this);
+    constructor(option) {
+        if (option.fileInput) {
+            errorHandle(
+                option.fileInput.tagName === 'INPUT' && option.fileInput.type === 'file',
+                'This fileInput is not a file input',
+            );
+        }
+
+        if (option.videoElement) {
+            errorHandle(option.fileInput.tagName === 'VIDEO', 'This videoElement is not a video element');
+        }
+
+        if (option.callbackVideoUrl) {
+            errorHandle(typeof option.callbackVideoUrl === 'function', 'This callbackVideoUrl is not a function');
+        }
+
+        if (option.callbackThumbnailUrl) {
+            errorHandle(
+                typeof option.callbackThumbnailUrl === 'function',
+                'This callbackThumbnailUrl is not a function',
+            );
+        }
+
+        this.option = option;
+        this.init();
+    }
+
+    init() {
+        const fileType = ['video/mp4', 'video/ogg', 'video/webm'];
+        this.option.fileInput.addEventListener('change', () => {
+            const file = this.option.fileInput.files[0];
+            if (file) {
+                errorHandle(fileType.includes(file.type), `Only file types are supported: ${fileType.toString()}`);
+                const videoUrl = URL.createObjectURL(file);
+                this.videoUrl = videoUrl;
+                if (this.option.callbackVideoUrl) {
+                    this.option.callbackVideoUrl(videoUrl);
+                }
+            }
+        });
+    }
+
+    setup(option = {}) {
+        this.option = {
+            ...this.option,
+            ...option,
+        };
     }
 }
 
 window.ArtplayerToolThumbnail = ArtplayerToolThumbnail;
-export default ArtplayerToolThumbnail;
+export default ArtplayerToolThumbnail;