Skip to content

Commit 649be7f

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 346b693 commit 649be7f

File tree

1 file changed

+83
-83
lines changed

1 file changed

+83
-83
lines changed

‎blog/25-11-15/ffmpeg-in-the-browser/ffmpeg-in-the-browser.html‎

Lines changed: 83 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
<title>
1616
FFMPEG In The Browser
1717
</title>
18-
18+
1919
<meta name=description content='Learn how to run FFmpeg directly in the browser using WebAssembly. This guide covers setup, performance tips, and practical examples for video and audio processing without server-side dependencies.'>
20-
20+
2121
<base href='https://ext-code.com/blog/25-11-15/ffmpeg-in-the-browser/'>
2222
<link rel=canonical href='https://ext-code.com/blog/25-11-15/ffmpeg-in-the-browser/ffmpeg-in-the-browser.html'>
2323

2424
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
2525
<meta name=viewport content='width=device-width, initial-scale=1'>
26-
26+
2727
<script type='application/ld+json'>
2828
{
2929
"@context" : "https://schema.org",
@@ -37,11 +37,11 @@
3737
"publisher" : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
3838
}
3939
</script>
40-
40+
4141
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
42-
43-
44-
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
42+
43+
44+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
4545

4646
<script init>
4747
console.clear();
@@ -61,7 +61,7 @@
6161
var debug;
6262

6363
var menu;
64-
64+
6565
var hdr;
6666
var log;
6767
var vcdemo;
@@ -78,12 +78,12 @@
7878

7979

8080
async function init(){
81-
81+
8282
menu = menumod();
8383

8484
mod.base.add({ext,$,datatype,keydown,menu,menumod,ace});
8585

86-
86+
8787
hdr = mod['blog-hdr'];
8888
log = mod['log-mod'];
8989

@@ -104,7 +104,7 @@
104104
ffprobe.initmod({ext,$,menu,ace});
105105
m4demo.initmod({ext,$,menu,ace});
106106
webcodec.initmod({ext,$,menumod,menu,ace});
107-
107+
108108

109109
await Promise.all([
110110
hdr.init(),
@@ -142,18 +142,18 @@
142142
[$,datatype,menumod,keydown,debug] = await promise;
143143

144144
mod.stack.complete;
145-
145+
146146
})();
147-
148-
</script init>
149-
150147

148+
</script init>
149+
150+
151151

152152
<link rel=stylesheet href='/blog/css/blog.css'>
153-
153+
154154
<style>
155-
156-
155+
156+
157157

158158
html
159159
{height:100%;font-family:arial}
@@ -167,80 +167,80 @@
167167
[component]
168168
{display:none}
169169

170-
.description
170+
.description
171171
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
172172
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
173173
.description>p
174174
{margin:0}
175175
.description > p+p
176176
{margin:10px 0}
177-
178-
179-
.blog-text
177+
178+
179+
.blog-text
180180
{margin:1.5rem auto;padding:1.25rem 1.75rem;background-color:#fcfcfc;/*#f9f9f9*/font-family:system-ui, sans-serif;font-size:1rem;line-height:2;
181-
color:#333;text-align:justify;border-radius:4px}
182-
.blog-text h2,.blog-text h3
181+
color:#333;text-align:justify;border-radius:4px}
182+
.blog-text h2,.blog-text h3
183183
{margin-top:1.5rem;margin-bottom:0.75rem;font-weight:600;color:#222;}
184-
.blog-text p
184+
.blog-text p
185185
{margin:0 0 1rem 0;}
186-
187-
188-
189-
190-
191-
192-
193-
186+
187+
188+
189+
190+
191+
192+
193+
194194
code
195195
{font-family:monospace;background:whitesmoke}
196196
code.inline
197197
{display:inline;padding:5px 10px}
198-
199-
200-
198+
199+
200+
201201
a
202202
{color:#4a90e2;text-decoration:none;font-weight:500}
203-
a:hover
203+
a:hover
204204
{text-decoration:underline}
205205
.link-domain
206206
{font-size:0.85rem;color:#777;margin-left:0.25rem}
207-
.link-domain::before
207+
.link-domain::before
208208
{content:'['}
209209
.link-domain::after
210210
{content:']'}
211211
.link-txt
212212
{}
213-
213+
214214
input
215215
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
216216
input[type=button]
217217
{cursor:pointer}
218-
219-
218+
219+
220220
snippet-html-console,snippet-console
221221
{margin:30px 0;display:block}
222-
223-
222+
223+
224224
.br
225-
{margin-top:0.8em}
225+
{margin-top:0.8em}
226226

227227
</style>
228228

229229
</head>
230230

231231

232232
<body>
233-
234-
235-
<blog-hdr component=grp1>
233+
234+
235+
<blog-hdr component=grp1>
236236
<h1 class=title>
237-
FFMPEG In The Browser
237+
FFMPEG In The Browser
238238
</h1>
239239
<time slot=date datetime=2025-11-15>
240240
15 Nov 2025
241241
</time>
242242
</blog-hdr>
243-
243+
244244
<div class=description>
245245
<p>
246246
Learn how to run FFmpeg directly in the browser using WebAssembly. This guide covers setup, performance tips,
@@ -267,7 +267,7 @@ <h1 class=title>
267267
</span>
268268
</a>
269269
</div>
270-
270+
271271
<section class=blog-text>
272272
<h3>
273273
videoconverter.js
@@ -281,7 +281,7 @@ <h3>
281281
</span>
282282
</a>
283283
<p>
284-
there are two variants, both are
284+
there are two variants, both are
285285
<br>
286286
<b>
287287
ffmpeg version 2.2.1 Copyright (c) 2000-2014 the FFmpeg developers
@@ -313,7 +313,7 @@ <h3>
313313
<br>
314314
note. there was mention of
315315
<a href=''>
316-
muaz-khan / Ffmpeg.js
316+
muaz-khan / Ffmpeg.js
317317
<span class=link-domain>
318318
github.com
319319
</span>
@@ -387,8 +387,8 @@ <h3>
387387
<snippet-console id=ffmpeg-wasm-tldr component src='ex/ffmpeg-wasm/demo-tldr.js'></snippet-console>
388388

389389
</section>
390-
391-
390+
391+
392392
<hr>
393393

394394

@@ -403,10 +403,10 @@ <h3>
403403
ive noticed this addition library, but havent had time to look at it further, i'll try to come back to it, and see if
404404
it is actually an independent version
405405
<br>
406-
406+
407407
</section>
408-
409-
408+
409+
410410
<hr>
411411

412412
<section class=blog-text>
@@ -418,13 +418,13 @@ <h3>
418418
<br>
419419
<a href='https://www.npmjs.com/package/ffprobe-wasm'>
420420
https://www.npmjs.com/package/ffprobe-wasm
421-
</a>
421+
</a>
422422
</p>
423423

424424
<snippet-html-console id=ffprobe src='ex/ffprobe/ffrobe.html' component></snippet-html-console>
425425

426426
</section>
427-
427+
428428
<hr>
429429

430430
<section class=blog-text>
@@ -445,12 +445,12 @@ <h3>
445445
</p>
446446

447447
<snippet-html-console id=mp4box-demo src='ex/mp4box/ex.html' component></snippet-html-console>
448-
448+
449449
</section>
450-
451-
452-
453-
450+
451+
452+
453+
454454
<section class=blog-text>
455455
<h3>
456456
Further Reading : Minimal h.264-in-javascript overview
@@ -501,15 +501,15 @@ <h4>
501501
</b>
502502
A historical JavaScript H.264 decoder compiled from Android’s C decoder via Emscripten.
503503
Runs fully in JS without browser codecs, but is heavier and slower compared to hardware/native paths.
504-
Useful if WebCodecs isn’t available or you need a pure-JS path.
504+
Useful if WebCodecs isn’t available or you need a pure-JS path.
505505
</li>
506506
</ul>
507507
<h3>
508508
Minimal webcodecs example: decode one frame and export jpeg
509509
</h3>
510510

511511
<snippet-editor id=webcodec component fullsize src='ex/webcodec-api.js'></snippet-editor>
512-
512+
513513
<h4>
514514
Tips:
515515
</h4>
@@ -569,7 +569,7 @@ <h4>
569569
Alternatives:
570570
</b>
571571
Use VideoFrame directly with HTMLVideoElement/WebGL for preview and only snapshot when needed;
572-
then export via canvas as above. Guides and examples show decode pipelines using WebCodecs for both playback and encoding.
572+
then export via canvas as above. Guides and examples show decode pipelines using WebCodecs for both playback and encoding.
573573
<br>
574574
<a href='https://www.slingacademy.com/article/decode-and-encode-video-with-the-webcodecs-api-in-javascript/'>
575575
Decode and Encode Video with the WebCodecs API in JavaScript
@@ -579,8 +579,8 @@ <h4>
579579
</a>
580580
</li>
581581
</ul>
582-
583-
<h4>
582+
583+
<h4>
584584
Pure-js fallback: broadway
585585
</h4>
586586
<p>
@@ -597,26 +597,26 @@ <h4>
597597
</p>
598598

599599
</section>
600-
601-
602-
603-
604-
605-
606-
607-
600+
601+
602+
603+
604+
605+
606+
607+
608608
<log-mod component></log-mod>
609-
609+
610610

611611
</body>
612-
612+
613613

614614
<script>
615615

616-
616+
617617
function initdom(rootnode){
618-
619-
618+
619+
620620
hdr.initdom();
621621
log.initdom();
622622

@@ -636,7 +636,7 @@ <h4>
636636

637637
}//initdom
638638

639-
639+
640640
//:
641641

642642

0 commit comments

Comments
 (0)