Skip to content

Commit 9eb0ba4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 60090c8 commit 9eb0ba4

File tree

1 file changed

+76
-8
lines changed

1 file changed

+76
-8
lines changed

‎utils/video/video-thumbnail-generator/video-thumbnail-generator.html‎

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747

4848
var ace;
4949

50-
var ext,$,datatype,menumod,keydown,debug
50+
var ext,$,datatype,menumod,keydown,debug,hs
5151
;
5252

5353

@@ -77,6 +77,8 @@
7777
log.init(),
7878
]);
7979

80+
initdom();
81+
8082
}//init
8183

8284

@@ -92,8 +94,9 @@
9294
'js/dom/menumod/menumod.js',
9395
'js/dom/keydown/keydown.js',
9496
'js/debug/debug.js',
97+
'js/string/hs.js',
9598
);
96-
[$,datatype,menumod,keydown,debug] = await promise;
99+
[$,datatype,menumod,keydown,debug,hs] = await promise;
97100

98101
mod.stack.complete;
99102

@@ -151,14 +154,28 @@
151154
.visually-hidden
152155
{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
153156

157+
.icon
158+
{border:1px solid gray;border-radius:3px;box-sizing:border-box;width:30px;height:30px;cursor:pointer}
159+
.spc
160+
{flex:1}
161+
162+
#output
163+
{border:1px solid lightgray;padding:10px;border-radius:10px;white-space:pre-wrap;overflow:auto;font-size:16px;font-family:monospace}
164+
165+
#width input,#height input
166+
{width:30px}
167+
168+
#png,#jpg
169+
{border:1px solid lightgray;padding:2px 10px;border-radius:10px}
170+
154171
</style>
155172

156173
</head>
157174

158175
<body>
159176

160177
<video-hdr component=grp>
161-
<img class=title src='images/video-thumbnail-generator.png' style='top:10px;height:55px' alt='video thumbnail generator'>
178+
<img class=title src='images/video-thumbnail-generator.png' style='top:10px;height:80px' alt='video thumbnail generator'>
162179
<h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
163180
<time slot=date datetime=2025-11-28>28 Nov 2025</time>
164181
</video-hdr>
@@ -193,6 +210,10 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
193210

194211
<div>
195212
<video controls></video>
213+
<span id=video-filename></span>
214+
<span id=video-size></span>
215+
<span id=video-width></span>
216+
<span id=video-height></span>
196217
</div>
197218
<div>
198219
<img id=thumbnail>
@@ -229,13 +250,35 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
229250
$('[value=generate]').onclick = btn.generate;
230251

231252
video = $('video');
253+
video.onloadedmetadata = onloadedmetadata;
254+
232255
img = $('#thumbnail');
233256

234257
output = $('#output');
235258

259+
disp('loading');
260+
261+
262+
if(window.video){
263+
complete.load(window.video.file,window.video.blob);
264+
}
265+
266+
236267
}//initdom
237268

238269

270+
//:
271+
272+
273+
function onloadedmetadata(){
274+
275+
console.log(video.videoWith,video.videoHeight);
276+
$('#video-width').textContent = video.videoWidth;
277+
$('#video-height').textContent = video.videoHeight;
278+
279+
}//onloadedmetadata
280+
281+
239282
//:
240283

241284

@@ -284,7 +327,7 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
284327
var fn2 = fn.split('.')[0];
285328
var thumb = fn2+'.png';
286329

287-
var uint8 = _uint8(cur.blob);
330+
var uint8 = await _uint8(cur.blob);
288331

289332
await ffmpeg.writeFile(fn,uint8);
290333

@@ -312,6 +355,9 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
312355
//:
313356

314357

358+
function focus(){}
359+
360+
315361
function source(){
316362
}//source
317363

@@ -320,11 +366,18 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
320366

321367
complete.load = function(file,blob){
322368

369+
window.video = {};
370+
window.video.file = file;
371+
window.video.blob = blob;
372+
323373
cur.file = file;
324374
cur.blob = blob;
325375
var url = window.URL.createObjectURL(blob);
326376
video.src = url;
327377

378+
$('#video-filename').textContent = file.filename;
379+
$('#video-size').textContent = blob.size;
380+
328381
}//load
329382

330383

@@ -334,12 +387,22 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
334387

335388
//:
336389

337-
390+
;
338391
(async()=>{
339392

340393
var {zip} = await import('https://cdn.jsdelivr.net/gh/javascript-2020/libs/js/io/tiny-unzip/tiny-unzip.m.js');
341394
var get = url=>fetch(url).then(res=>res.blob());
342-
var blob = await get('https://raw.githubusercontent.com/javascript-2020/external/main/ffmpeg/ffmpeg-wasm/ffmpeg-wasm.zip');
395+
396+
var blob;
397+
if(window['ffmpeg-wasm']){
398+
disp('ffmpeg-wasm');
399+
blob = window['ffmpeg-wasm'];
400+
}else{
401+
blob = await get('https://raw.githubusercontent.com/javascript-2020/external/main/ffmpeg/ffmpeg-wasm/ffmpeg-wasm.zip');
402+
window['ffmpeg-wasm'] = blob;
403+
}
404+
405+
var dtype = v=>Object.prototype.toString.call(v).slice(8,-1).toLowerCase();
343406
var fnstr = (fn,_,js,i1,i2)=>(js=fn+'',i1=js.indexOf('{'),i2=js.lastIndexOf('}'),js.slice(i1+1,i2));
344407
_blob = v=>new Blob([v]);
345408
_uint8 = async v=>dtype(v)=='blob' ? new Uint8Array(await v.arrayBuffer()) : new Uint8Array(v);
@@ -393,10 +456,12 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
393456
ffmpeg = new FFmpeg();
394457
await ffmpeg.load({coreURL:'ffmpeg-core.js',wasmURL:files['ffmpeg-core.wasm']});
395458

396-
ffmpeg.on('log',({message})=>console.log(message));
459+
ffmpeg.on('log',({message})=>{console.log(message);disp(message)});
397460
await ffmpeg.exec(['-version']);
398461

399-
})();
462+
})()
463+
;
464+
400465

401466
function disp(str){
402467

@@ -405,6 +470,9 @@ <h1 slot=seo-hdr class=visually-hidden>video thumbnail generator</h1>
405470
output.append(div);
406471

407472
}//disp
473+
474+
475+
408476

409477
</script>
410478

0 commit comments

Comments
 (0)