-
Notifications
You must be signed in to change notification settings - Fork 39
/
index.html
85 lines (75 loc) · 3.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>视频转GIF</title>
<meta charset="utf-8">
<meta name="description" content="视频转GIF">
<script type="text/javascript" src="plugins/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/index.css">
<div class="main">
<div class="main-content">
<div class="flex-box">
<div class="flex">
<img id="mainImg">
<video id="play" controls></video>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<p class="tips" id="status"></p>
<ul class="text-list"></ul>
</div>
<div class="row">
<button class="btn btn-gray" id="addText">添加文字</button>
<button class="btn btn-primary" id="startGet">开始取图</button>
<button class="btn btn-primary" id="getOver">取图完成</button>
</div>
<div class="operate-area">
<input type="number" placeholder="宽度" value="300" max="800" id ="gifWidth"/>
<label class="btn btn-gray select" for="selectVideo"><span id="selectTip">选择视频</span><input type="file" accept="video/*" name="filie" class="upload-file" id="selectVideo"></label>
<button class="btn btn-primary" id="createGif">生成 GIF</button>
</div>
<p class="tips waring">备注：上传视频尽量控制时长不超过 15 S，插件不做限制，视频越大，转换时间越长</p>
</div>
<h3>使用教程</h3>
<ul class="tutorial">
<li>
<h4>第 1 步</h4>
<p>点击 <button class="btn btn-gray" disabled>选择视频</button> 按钮，选取要转换的视频</p>
<p>GIF宽度默认是300，可以点击宽度输入框自行修改，最大不超过 800</p>
</li>
<li>
<h4>第 2 步（开始取图）</h4>
<p>点击 <button class="btn btn-primary" disabled>开始取图</button> 按钮，开始播放视频，自动抓取GIF</p>
<p>如果需要在GIF上添加文字，可以在取图过程中，点击左侧 <button class="text-btn start" disabled></button> 定位图标，按钮会自动获取当前时间，先后点击两次分别获取文字开始标注时间和结束时间</p>
<p>视频播放完也可以自自行输入修改文字的标注时间范围</p>
</li>
<li>
<h4>第 3 步（标注文字）</h4>
<p>点击 <button class="btn btn-gray" disabled>添加文字</button> 会自动添加一行文字输入区域</p>
<p>在取图过程中，可以点击左侧 <button class="text-btn start" disabled></button> ，按钮会自动获取当前时间，先后点击两次分别获取文字开始标注时间和结束时间</p>
<p>视频播放完也可以自自行输入修改文字的标注时间范围、文字内容、颜色、大小、位置等</p>
</li>
<li>
<h4>第 4 步（取图完成）</h4>
<p>点击 <button class="btn btn-primary" disabled>取图完成</button> 或者 视频播放完成 后会结束取图，出现 <button class="btn btn-primary" disabled>生成GIF</button> 按钮</p>
</li>
<li>
<h4>第 5 步（生成GIF）</h4>
<p>点击 <button class="btn btn-primary" disabled>生成GIF</button> ，等待片刻即可完成，右键可以存储GIF到本地</p>
<p>如果想做文字的修改，可以直接修改后重新点击 <button class="btn btn-primary" disabled>生成GIF</button> ，插件会再次生成新的GIF</p>
</li>
</ul>
</div>
<script type="text/javascript" src="plugins/gifshot.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="plugins/jquery.minicolors.css" />
<script src="plugins/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>