ArtPlayer/docs/thumbnail/index.html

<!DOCTYPE html>
<html>

<head>
    <title>Thumbnail tool for ArtPlayer</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="artplayer,html5,video,player,thumbnail">
    <meta name="description" content="Thumbnail tool for ArtPlayer">
    <link rel="shortcut icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="../uncompiled/artplayer.css">    
    <link rel="stylesheet" href="../uncompiled/artplayer-tool-thumbnail.css">    
</head>

<body>
    <div class="container">
        <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>
    <script src="./js/common.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

</html>